noesya/osuny

<%= block_component_edit block, :alphabetical %>
<div class="table-responsive mb-5">
  <div class="fake-table">
    <div class="thead">
      <div class="tr">
        <div class="td" v-for="(column, index) in data.columns">
          <div class="d-flex">
            <input  type="text"
                    class="form-control"
                    v-model="data.columns[index]">
            <a  class="btn text-danger"
                v-on:click="data.columns.splice(index, 1); data.elements.forEach(row => row.cells.splice(index, 1));">
                <i class="<%= Icon::DELETE %>"></i>
            </a>
          </div>
        </div>
        <div class="td">
          <a  class="btn btn-primary mt-n1"
              v-on:click="data.columns.push('')">
              <i class="<%= Icon::ADD %>"></i> colonne
          </a>
        </div>
      </div>
    </div>
    <draggable :list="data.elements" handle=".dragHandle" class="tbody">
      <div class="tr" v-for="(row, index) in data.elements">
        <div class="td" v-for="(column, columnIndex) in data.columns">
          <input  type="text"
                  class="form-control"
                  v-model="row.cells[columnIndex]">
        </div>
        <div class="td" class="text-end">
          <div class="d-flex">
            <a  class="btn text-danger"
                v-on:click="data.elements.splice(index, 1)">
                <i class="<%= Icon::DELETE %>"></i>
            </a>
            <a class="btn dragHandle">
              <i class="<%= Icon::DRAG %> handle"></i>
            </a>
          </div>
        </div>
      </div>
    </draggable>
  </div>
  <a  class="btn btn-primary"
      v-on:click="data.elements.push({cells: []})">
      <i class="<%= Icon::ADD %>"></i> ligne
  </a>
</div>

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