= form_for site, html: { class: form_class(site) } do |f|
  - unless site.persisted?
    .form-group#design_id
      - if invalid? site, :design_id
        = render 'bootstrap/alert' do
          = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
            layouts: site.incompatible_layouts.to_sentence)
      
      -# Desktop view with 3 columns and radio_buttons
      .row.designs.d-none.d-lg-flex
        - @designs = Design.all.order(priority: :desc).reject(&:no_theme?)
        .col-md-3.designlist
          %h2.pb-3= t('.selector')
          - @designs.each do |design|
            .col.d-flex.flex-column.custom-control-design{"data-controller" => "designs"}
              %div{"data-designs-target" => "radio", "data-action" => "click->designs#selection"}
                = f.radio_button :design_id, design.id,
                  checked: design.id == site.design_id,
                  disabled: design.disabled, 
                  required: true, class: 'radio-toolbar'
                = f.label "design_id_#{design.id}", " - #{design.name}",
                  class: 'font-size-bold'
              .flex-fill.f-3
                = sanitize_markdown design.description,
                  tags: %w[p a strong em]
        .col-md-6.designpreview
          %h2.text-center.pb-3= t('.preview')
          .embed-responsive.embed-responsive-1by1
            %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
        .col-md-3
          %h2.pb-3= t('.characteristics')
          %div{"data-designs-target" => "infocar"}
          %p.design 1. Es gratis
          %p.design 2. Sofware libre - Licencia GPL
          %p.design 3. Compatible con la web distribuida
          %br 
          %a.btn.btn-primary.btn-lg.mt-4{role: "button", href: "sutty.nl"}= t('.source_code') 
      
      -# Tablet and mobile views with 1 columns and accordion
      .row.d-lg-none
        - @designs = Design.all.order(priority: :desc).reject(&:no_theme?)
        .col 
          -# image_path("images/logo.png")
          %h1.pb-3.text-center.font-weight-bolder= t('.selector')
          - @designs.each do |design|
            %details.styled
              %summary.custom-control-design
                %h5.font-weight-bolder.pt-2 - #{design.name}  
                .pb-2 #{design.description}
              .col
                %h1.text-center.font-weight-bolder.pb-3= t('.preview')
                .embed-responsive.embed-responsive-1by1
                  %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
              .col
                %h1.text-center.font-weight-bolder.pb-3= t('.characteristics')
                - characteris = design.characteristics.split(".")
                - characteris.each_with_index do |charact, index|
                  %h5.design #{index + 1}. #{charact}
                %a.btn.btn-primary.btn-lg.btn-block.mt-4{role: "button", href: design.url}= t('.source_code')


      -# Custom and Donation buttons 
      .row.pt-5
        .col-lg-10.offset-2
          .row
            .col-8
              %h3.text-primary= t('.custom.title')
              %p= t('.custom.help')
            .col-4.pt-3
              %button.btn.btn-primary= t('.custom.contact')
      .row.py-4
        .col-lg-10.offset-2
          .row
            .col-8
              %h3.text-primary= t('.donation.title')
              %p= t('.donation.help')
            .col-4.pt-3
              %button.btn.btn-primary= t('.donation.link')