noesya/osuny

<div class="row">
  <div class="col-xl-6">
    <%= block_component_edit block, :description, summernote_config: 'mini' %>
  </div>
</div>

<%= block_component_edit block, :layout %>

<div class="row">
  <div class="col-xl-6">
    <p><%= t('.send_multiple_images') %></p>
    <input  class="form-control"
            type="file"
            accept="<%= default_images_formats_accepted %>"
            @change="onMultipleFileImageChange( $event, 'image' )"
            data-size-limit="<%= Rails.application.config.default_image_max_size %>"
            multiple>
    <div class="form-text mb-2">
      <%= images_formats_accepted_hint %>
    </div>
  </div>
</div>

<hr class="my-5">

<p><%= t('.move_images') %></p>
<draggable :list="data.elements" class="row">
  <div v-for="(element, index) in data.elements" class="col-2 mb-4">
    <div class="card">
      <div class="card-header p-1 text-center">
        <i class="<%= Icon::MOVE %>"></i>
      </div>
      <div v-if="element.image.id">
        <img :src="getImageUrl(element.image)" class="img-fluid" />
      </div>
    </div>
  </div>
</draggable>

<hr class="my-5">

<p><%= t('.send_and_edit_images') %></p>

<div v-for="(element, index) in data.elements" class="mb-5">
  <%= osuny_panel 'Image' do %>
    <div class="text-end">
      <a  class="btn btn-sm text-danger mt-n4"
          v-on:click="data.elements.splice(data.elements.indexOf(element), 1)"
          title="<%= t 'admin.communication.blocks.templates.gallery.edit.remove_image' %>">
          <i class="<%= Icon::DELETE %>"></i>
      </a>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <%= block_component_edit block, :image,
              template: @element,
              label: t('admin.communication.blocks.components.image.input.label'),
              placeholder: t('admin.communication.blocks.components.image.input.placeholder') %>
      </div>
      <div class="col-sm-6">
        <%= block_component_edit block, :alt,
              template: @element,
              label: t('admin.communication.blocks.components.image.alt.label'),
              placeholder: t('admin.communication.blocks.components.image.alt.placeholder') %>
        <%= block_component_edit block, :credit,
              template: @element,
              label: t('admin.communication.blocks.components.image.credit.label'),
              placeholder: t('admin.communication.blocks.components.image.credit.placeholder'),
              summernote_config: 'mini' %>
      </div>
    </div>
    <%= block_component_edit block, :text,
          template: @element,
          summernote_config: 'mini' %>
  <% end %>
</div>

<%= block_component_add_element block, t('.add_image') %>