noesya/osuny

<%
layouts = template.class.layouts
%>
<p>
  <span class="form-label pe-2">
    <%= t('admin.communication.blocks.components.layouts.label') %>
  </span>
  <% layouts.each do |layout| %>
    <strong v-show="data.layout == '<%= layout %>'">
      <%= t "admin.communication.blocks.templates.#{template.kind}.layouts.#{layout}.label" %>
    </strong>
  <% end %>
  <a  data-bs-toggle="collapse"
      href="#layouts"
      class="ms-4 action">
      <%= t('admin.communication.blocks.components.layouts.button') %>
  </a>
</p>

<div class="collapse mb-5" id="layouts">
  <% layouts.each do |layout| %>
    <%
    i18n = "admin.communication.blocks.templates.#{template.kind}.layouts.#{layout}"
    name = t "#{i18n}.label"
    description = t "#{i18n}.description"
    %>
    <div class="mb-4 layout" v-bind:class="{ 'layout--selected': data.layout == '<%= layout %>' }">
      <label for="layout-<%= layout %>">
        <div class="row pure__row--small">
          <div class="col-md-4">
            <%= image_tag "communication/blocks/templates/#{template.kind}/#{layout}.png",
                          alt: name,
                          class: 'layout__image img-fluid border',
                          loading: 'lazy' %>
          </div>
          <div class="col-md-8 d-md-flex flex-column justify-content-center">
            <div class="p-3 pe-5">
              <p class="mb-0">
                <b><%= name %></b>
                <input  class="form-check-input opacity-0"
                        type="radio"
                        name="layout"
                        v-model="data.layout"
                        value="<%= layout %>"
                        id="layout-<%= layout %>">
              </p>
              <p class="mb-0"><%= description %></p>
            </div>
          </div>
        </div>
      </label>
    </div>
  <% end %>
</div>