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

-#
  Genera un listado de radios entre los que se puede elegir solo uno para
  guardar.  Podemos elegir entre los artículos ya cargados o agregar uno
  nuevo.

  Al agregar uno nuevo, se abre un segundo modal que carga el formulario
  correspondiente vía HTMX. El formulario tiene que cargarse por fuera
  del formulario principal porque no se pueden anidar.

:ruby
  id = id_for(base, attribute)
  name = "#{base}[#{attribute}]"
  form_id = random_id
  modal_id = random_id
  post_id = random_id
  post_form_id = random_id
  post_modal_id = random_id
  post_form_loaded_id = random_id
  value_list_id = random_id
  controllers = %w[modal array]
  controllers << 'required-checkbox' if metadata.required

%div{ id: modal_id, 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.p-3{ 'aria-hidden': 'true' }
      %span.placeholder.w-100

  .form-group
    = hidden_field_tag name, ''
    .d-flex.align-items-center.justify-content-between
      %div
        = label_tag id, post_label_t(attribute, post: post)
        = render 'posts/required_checkbox', required: metadata.required, name: name, initial: metadata.empty?, type: 'radio'
      = 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.list-unstyled.px-3.font-weight-bold.placeholder-glow{ data: { target: 'array.current' } }
    - unless metadata.empty?
      = render 'posts/new_array_value', value: metadata.to_s

  = 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)
        %input.form-control{ data: { target: 'array.search', action: 'input->array#search' }, type: 'search', placeholder: t('.filter') }

    - content_for :"#{id}_body" do
      .form-group.mb-0{ id: value_list_id }
        - metadata.values.each_pair do |value, key|
          .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: (metadata.value == key), content: value, type: 'radio'

    - content_for :"#{id}_footer" do
      = 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'