panel/app/views/posts/attributes/_new_array.haml

-#
  Genera un listado de checkboxes entre los que se puede elegir para guardar
:ruby
  id = id_for(base, attribute)
  name = "#{base}[#{attribute}][]"
  form_id = random_id
  controllers = %w[modal array enter]
  controllers << 'required-checkbox' if metadata.required

%div{ data: { controller: controllers.join(' '), 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
  %template{ data: { target: 'array.placeholder' } }
    .col.mb-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

  .form-group.mb-0
    -#
      Si la lista es obligatoria, al menos uno de los ítems tiene que
      estar activado. Logramos esto con un checkbox oculto que se marca
      como obligatorio al validar el formulario.
    .d-flex.align-items-center.justify-content-between
      %div
        = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?
      = render 'bootstrap/btn', content: t('.edit'), action: 'modal#show'
  -# Mostramos la lista de valores actuales.

    Al aceptar el modal, se vacía el listado y se completa en base a
    renderizaciones con HTMX. Para poder hacer eso, tenemos que poder
    acceder a todos los items dentro del modal (como array.item) y
    enviar el valor al endpoint que devuelve uno por uno. Esto lo
    tenemos disponible en Stimulus, pero queremos usar HTMX o técnica
    similar para poder renderizar del lado del servidor.

    Para poder cancelar, mantenemos el estado original y desactivamos
    o activamos los ítemes según estén incluidos en esa lista o no.
  %ul.placeholder-glow{ data: { target: 'array.current' } }
    - metadata.value.sort_by(&:remove_diacritics).each do |value|
      = render 'posts/new_array_value', value: value

  = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do
    - content_for :"#{id}_header" do
      .form-group.flex-grow-1.mb-0
        = label_tag id, post_label_t(attribute, post: post), class: 'mb-0'
        %small.feedback.form-text.text-muted.mt-0.mb-1= post_help_t(metadata.name, post: post)
        %input.form-control{ data: { target: 'array.search', action: 'input->array#search keydown->enter#prevent' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: "#{id}_body" }
        -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
        - metadata.values.sort_by(&:remove_diacritics).each do |value|
          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value, data: { action: 'required-checkbox#change', target: 'required-checkbox.checkbox' }

    - content_for :"#{id}_footer" do
      .input-group.w-auto.flex-grow-1.my-0
        %input.form-control{ form: form_id, name: 'value', type: 'text', placeholder: t('.add_new'), required: true }
        .input-group-append
          = render 'bootstrap/btn', content: t('.add', layout: ''), form: form_id, type: 'submit', class: 'mb-0 mr-0'
      = render 'bootstrap/btn', content: t('.accept'), action: 'array#accept modal#hide', class: 'm-0 mr-1'
      = render 'bootstrap/btn', content: t('.cancel'), action: 'array#cancel modal#hide', class: 'm-0'

    -# Los formularios para HTMX se colocan por fuera del formulario
       principal, porque HTML5 no soporta formularios anidados. Los campos
       quedan unidos al formulario por su atributo `id`.

       Al enviar el formulario se obtiene una nueva opción con el valor
       y se la agrega al final del listado.
    - content_for :post_form do
      %form{ id: form_id, 'hx-get': site_posts_new_array_path(site), 'hx-target': "##{id}_body", 'hx-swap': 'beforeend' }
        %input{ type: 'hidden', name: 'name', value: name }
        %input{ type: 'hidden', name: 'id', value: form_id }