.nested-fields.kiwi_fields.col-lg-2.col-md-3.col-sm-4
  .d-flex.justify-content-between.kiwi_list_item{ class: "#{'has-error' if f.object.errors.present?}" }
    %span.btn.btn-link.text-truncate{ title: f.object.name }
      = link_to '', class: 'package_edit kiwi_element_name', data: { 'bs-target': "#package-#{f.object.name}", 'bs-toggle': 'modal' } do
        = f.object.name
        - if f.object.arch.present?
          %small (#{f.object.arch})
    %span.btn.btn-link.kiwi_actions
      = link_to_remove_association f do
        %i.fas.fa-times-circle.text-danger

  .modal.fade{ tabindex: '-1', role: 'dialog', id: "#{f.object.name.present? ? "package-#{f.object.name}" : 'add-package'}",
               class: "#{'new_element' if f.object.new_record?}" }
    .modal-dialog{ role: 'document' }
      .modal-content
        .modal-header
          %h5.modal-title #{f.object.name.present? ? 'Edit' : 'Add'} package

        #flash-messages
          %p.ui-state-error.alert-danger.p-3.mb-0.d-none
            The name can not be empty!

        .modal-body
          .mb-3.ui-front
            = f.label :name
            .input-group
              %span.input-group-text
                %i.fas.fa-search
              -# TODO: refactor to use the _search_box partial
                 WARNING: the .kiwi-package-search class is used by the kiwi_editor plugin and it interact with the HTML/CSS element
              = f.text_field :name, required: true,
                                    placeholder: 'Type to autocomplete...',
                                    class: 'form-control kiwi-package-search',
                                    data: { source: autocomplete_binaries_kiwi_image_path, default: f.object.name }
          .mb-3
            = f.label :arch, 'Arch:'
            = f.text_field :arch, data: { default: f.object.arch }, class: 'form-control'
            = f.label :replaces, 'Replaces:'
            = f.text_field :replaces, data: { default: f.object.replaces }, class: 'form-control'
          .form-check
            = f.check_box :bootinclude, data: { default: f.object.bootinclude }, class: 'form-check-input'
            = f.label :bootinclude, class: 'form-check-label'
          .form-check
            = f.check_box :bootdelete, data: { default: f.object.bootdelete }, class: 'form-check-input'
            = f.label :bootdelete, class: 'form-check-label'

        .modal-footer
          = link_to('Cancel', '#', title: 'Cancel', class: 'revert-dialog btn btn-sm btn-outline-danger px-4')
          = link_to('Continue', '#', title: 'Continue', class: 'close-dialog btn btn-sm btn-primary px-4')
