= form_for site, html: { class: form_class(site) } do |f|
  - unless site.persisted?
    .form-group#design_id
      %h2= t('.design.title')
      %p.lead= t('.help.design')
      - 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)
      .row
        - @designs = Design.all.order(priority: :desc)
        .col-md-3.black-bg.col-sm-12
          %h5.pb-3 Selector de Plantillas
          - @designs.each do |design|
            .design.col.d-flex.flex-column
              .custom-control.custom-radio
                = f.radio_button :design_id, design.id,
                  checked: design.id == site.design_id,
                  disabled: design.disabled,
                  required: true, class: 'custom-control-input'
                = f.label "design_id_#{design.id}", design.name,
                  class: 'custom-control-label'
              .flex-fill
                = sanitize_markdown design.description,
                  tags: %w[p a strong em]
        
        .col-md-6.black-bg.col-sm-12
          %h5.text-center.pb-3 Previsualizar Plantilla
          .embed-responsive.embed-responsive-1by1
            %iframe.embed-responsive-item{allowfullscreen: "", src: "https://www.youtube.com/embed/zpOULjyy-n8?rel=0"}
        .col-md-3.black-bg.col.sm-12
          %h5.pb-3 Características
          = @designs.first.inspect