merged/app/views/merged/cards/index.haml

.mx-20.flex.h-16.items-center.gap-16
  = render "merged/sections/sections_pagination" , section: @section
  .text-xl.text-gray-900
    Cards for Section #{@section.index} -
    = link_to @section.header , merged.section_path( @section.id) , class: "underline"
  = link_to( "New Card" , merged.new_section_card_path(@section.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")

- template = find_template(@section)
= render( template , section: @section)

- @section.cards.each_with_index do |card , index|
  .flex.gap-10.px-20.pt-4.pb-2.mb-2.border.border-2.bg-neutral-50.border-slate-400{ id: "card_#{card.id}"}
    .basis-60
      %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
      .flex.flex-wrap
        = blue_button( "Up" , merged.card_move_path(card.id , dir: :up) )
        = blue_button( "Down" , merged.card_move_path(card.id , dir: :down) )
      .mt-6
        .basis-full.mt-3
          Updated at:
          = distance_of_time_in_words_to_now(card.updated_at)
        .basis-full.mb-3
          Updated by:
          = card.updated_by
        .basis-full.mb-3
        = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
          =submit_button( "Delete Card" , true)

    .basis-80
      = link_to(merged.images_path(card_id: card.id)) do
        -if card.image
          %h3.mt-4.text-lg.font-bold Image #{card.image.name}
          .flex.align-center.justify-between.mb-4
            .text-lg.font-bold.mt-2.mx-2
              = card.image.size.to_s + "k"
            %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
              = card.image.aspect_ratio
          = image_for( card , "mb-4")
          = green_button("Change Image" , merged.images_path(card_id: card.id) )
          = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
        -else
          %h3.text-lg.font-bold No image
    .basis-72.grow
      = form_tag( merged.card_path(card.id) , {method: :patch  , class: "mx-auto mb-0 max-w space-y-4" } ) do
        %label.block
          .text-lg.font-bold Header
          = text_field_tag( :header , card.header, class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
        %label.block
          .mt-4.text-lg.font-bold Text
          = text_area_tag( :text , card.text, rows: 5 , class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm" )
        =submit_button( "Update Texts")

    .basis-72.grow
      = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mb-0 max-w space-y-4" }) do
        - card.option_definitions.each do |option|
          .grid.grid-cols-3
            =render "merged/sections/option_form_#{option.type}" , section: card , option: option
        -if card.option_definitions.empty?
          %p No options
        -else
          = submit_button("Update Options")