.mx-20.flex.h-16.items-center.gap-16
  = render "merged/sections/sections_pagination" , section: @section
  .text-3xl.font-bold.text-gray-900
    = @section.cards.length
    Cards
  = 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")

= render_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
        .p-2
          =link_to(merged.card_move_path(card.id , dir: :down)) do
            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
        .p-2
          =link_to(merged.card_move_path(card.id , dir: :up)) do
            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
              %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}

      .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_for( card , {method: :delete  } ) do
          %button.button.remove.mt-4{type: :submit} Delete Card
      = simple_form_for(  card ,  method: :patch ) do |f|
        = f.input :section_id , label: "move to section" , include_blank: false ,
                  collection: card_section_select
        %button.button.change.mt-4{type: :submit} Move

    .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")
          = link_to Change Image" , merged.images_path(card_id: card.id) )
          = link_to merged.image_path(card.image.id)  do
            %button.button.change Edit Image
          = link_to merged.card_set_image_path( card.id  , image: "")
            %button.button.remove Remove image
        -else
          %h3.mt-4.text-lg.font-bold No image
          %button.my-3.bg-cyan-200{class: button_classes} Add Image
    .basis-72.grow
      %label.block
        %h4.text-lg.font-bold Texts
      = simple_form_for( card , method: :patch) do |f|
        = f.input :header
        = f.input :text , as: :text , input_html: {rows: rows(card)}
      %button.button.change.mt-4{type: :submit} Update Texts

    .basis-72.grow
      = form_for( card , {method: :patch }) 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
          %button.button.change{type: :submit} Update Options