= form_for site, html: { class: form_class(site) } do |f|
  -# Desktop view with 3 columns and radio_buttons
  .row.d-none.d-lg-flex
    .col-md-4.max-height.overflow-auto
      %h2.pb-3= t('.selector')
      - @designs.each do |design|
        .col.d-flex.flex-column.pl-2.mb-n1.border-magenta.border-solid
          %div
            = f.label "design_id_#{design.id}", " - #{design.name}",
              class: 'h5 font-weight-bolder'
          .flex-fill.f-3
            = sanitize_markdown design.description,
              tags: %w[p a strong em]
    .col
      - designs.each do |design|
        = f.radio_button :design_id, design.id,
          checked: design.id == (site.design_id || @designs.first.id),
          disabled: design.disabled,
          required: true, class: 'width-0 opacity-0 position-absolute toggler'
        .row.toggled
          .col-md-8.border-0.border-lg-right.border-dashed.border-cyan
            .border-lg-left.border-cyan
              %h2.text-center.pb-3= t('.preview')
              .embed-responsive.embed-responsive-1by1
                %iframe.embed-responsive-item{allowfullscreen: "", src: design.url }
          .col-md-3
            %h2.pb-3= t('.characteristics')
            %div
            - design.characteristics.each_line do |characteristic|
              %h5 #{characteristic} 
            %br 
            %a.btn.btn-primary.btn-lg.mt-4{role: "button", href: design.url}= t('.source_code')