noesya/osuny

<%= block_component_edit block, :description, summernote_config: 'mini' %>

<%= osuny_separator %>

<draggable  class="row g-3 mb-3" 
            :list="data.elements" 
            handle=".dragHandle">
  <div v-for="(element, index) in data.elements" class=" col-6 col-md-4">
    <div class="card draggable-item dragHandle m-0">
      <div class="card-body">
        <a>
          <i class="<%= Icon::MOVE %> handle"></i>
          {{ element.number }}
          {{ element.unit }}
        </a>
      </div>
    </div>
  </div>
</draggable>

<%= osuny_separator %>

<%= block_component_add_element block, t('.add_key') %>
<div v-for="(element, index) in data.elements" class="row mb-4">
  <div class="col-sm-4">
    <%= block_component_edit block, :image, template: @element %>
    <a  class="btn btn-sm text-danger"
        v-on:click="data.elements.splice(data.elements.indexOf(element), 1)"
        title="<%= t '.remove_key' %>">
        <i class="<%= Icon::DELETE %>"></i>
        <%= t '.remove_key' %>
    </a>
  </div>
  <div class="col-sm-8">
    <div class="row">
      <div class="col-4">
        <%= block_component_edit block, :number, template: @element %>
      </div>
      <div class="col-8">
        <%= block_component_edit block, :unit, template: @element %>
      </div>
    </div>
    <%= block_component_edit block, :description, template: @element, summernote_config: 'mini' %>
  </div>
</div>
<div v-show="data.elements.length > 2">
  <%= block_component_add_element block, t('.add_key') %>
</div>