panel/app/views/posts/attributes/_new_has_one.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 = random_id
  name = "#{base}[#{attribute}]"
  target_id = random_id
  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
  layout = metadata.filter[:layout]
  invalid_id = random_id
  submitting_id = random_id
  saved_id = random_id

%div{ data: { controller: 'modal'  }}
  .form-group
    = hidden_field_tag name, ''
    .d-flex.align-items-center.justify-content-between
      = label_tag id, post_label_t(attribute, post: post), class: 'h3'
      = render 'bootstrap/btn', content: t('.edit'), data: { action: 'modal#showAnother', 'modal-show-value': modal_id }, id: random_id

  -# Aquí se reemplaza por la tarjeta y el UUID luego de guardar
  .row.no-gutters.placeholder-glow{ id: target_id }
    -# @todo issue-7537
    - if !metadata.empty? && (indexed_post = site.indexed_posts.find_by(post_id: metadata.value))
      = render 'posts/new_has_one', post: indexed_post, name: name, value: metadata.value, modal_id: modal_id

-#
  El modal se genera por fuera del formulario, para poder enviar los
  datos y recibir su UUID en respuesta.
- content_for :post_form do
  %div{ id: modal_id, data: { controller: 'modal'  }}
    -# Si hay un solo layout o el post asociado ya existía
    - if layout.is_a?(String) || metadata.has_one.present?
      = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' } do
        - content_for :"#{id}_body" do
          -# @todo ocultar el modal después de guardar
          .placeholder-glow{ 'hx-get': site_posts_form_path(site, layout: layout, base: id, name: name, form: form_id, swap: 'innerHTML', target: target_id, attribute: 'new_has_one', hide: modal_id, uuid: metadata.value, invalid: invalid_id, submitting: submitting_id, saved: saved_id, inverse: metadata.inverse, metadata.inverse => post.uuid.value), 'hx-trigger': 'load' }
            %span.placeholder.w-100.h-100

        - content_for :"#{id}_footer" do
          = render 'posts/validation', site: site, invalid: { id: invalid_id }, submitting: { id: submitting_id }
          = render 'bootstrap/alert', class: 'm-0 d-none fade', id: saved_id, data: { controller: 'notification', action: 'notification:show@window->notification#show', 'notification-hide-class': 'hide', 'notification-show-class': 'show' } do
            = t('.saved')
          = render 'bootstrap/btn', form: form_id, content: t('.save'), type: 'submit', class: 'm-0 mt-1 mr-1'
          = render 'bootstrap/btn', content: t('.close'), action: 'modal#hide', class: 'm-0 mt-1 mr-1'

    - else
      -# @todo Implementar selección de layout para cargar el formulario correcto
      Nada