units.html

  <div class="row" data-controller="units">
    <div class="col">
      <%= render "shared/forms/label", locals: { form: form, input: :unit, presence: true } %>
      <div class="row">

        <div class="col">
          <div class="input-group">
            <%= form.select :unit_ids, build_options, { include_blank: false },
              {
                id: 'units',
                class: 'select form-control form-control-lg rounded',
                name: 'select_unit',
                multiple: true,
                data: {
                  'units-target': 'select',
                  size: 5,
                  style: 'btn-gray-800',
                  'selected-text-format': 'count',
                  'live-search': true,
                  'live-search-placeholder': 'Digite para buscar uma unidade na lista.',
                  'none-selected-text': 'Selecione as unidades ...',
                  'dropup-auto': false,
                  'header': 'Unidades Disponíveis',
                  icon: 'fad fa-home-alt',
                  action: 'change->units#add'
                }
            } %>
            <%# <div class="input-group-append"> %>
              <%#= button_tag('Selecionar', { class: 'btn btn-gray-900', data: { action: 'click->units#add' }}) %>
            <%# </div> %>
          </div>
        </div>

        <div class="col">
          <div class="card">
            <div class="card-header text-white bg-gray-800 rounded font-weight-bold border-0 h5 mb-0">
              Unidades selecionadas
            </div>
            <div class="card-body m-0 p-0 px-2">
              <div class="row">
                <div class="col-12">
                  <table data-units-target="table" class="table table-sm mb-0">
                    <tbody data-units-target="tbody">
                      <% if @customer.units.any? %>
                        <% @customer.units&.order(:position)&.each do |unit| %>
                          <tr>
                            <td class="text-left">
                              <%= unit.description %>
                              <%= form.hidden_field "unit_#{unit.id}", data: { name: unit.description }, value: unit.id, name: 'customer[unit_ids][]' %>
                            </td>
                            <td class="text-right">
                              <% if unit.not_started? %>
                                <%= button_tag('button', type: 'button', class: 'btn btn-danger btn-sm font-weight-bold', data: { unit: unit.id, action: 'click->units#remove' } ) do %>
                                  <i class='far fa-fw fa-trash'> </i>
                                <% end %>
                              <% end %>
                            </td>
                          </tr>
                        <% end %>
                      <% else %>
                        <div class="p-2">
                          <strong class="text-muted">Selecione as unidades...</strong>
                        </div>
                      <% end %>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>