{# Modal suppression d'images #}
<style>
  .delete-images-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
  }

  .delete-images-modal .modal-header,
  .delete-images-modal .modal-footer {
    background: #fff;
    border-color: #e5e7eb;
  }

  .delete-images-modal .modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
  }

  .delete-images-modal .modal-body {
    background: #f8fafc;
    padding: .75rem .85rem;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .delete-images-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
  }

  .delete-images-filters,
  .delete-images-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .delete-pill {
    border: 1px solid #d7dce3;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    font-size: .74rem;
    padding: .2rem .55rem;
    cursor: pointer;
    line-height: 1.2;
  }

  .delete-pill.active {
    background: #0b3ea8;
    border-color: #0b3ea8;
    color: #fff;
  }

  .delete-note {
    font-size: .78rem;
    border: 1px solid #fee2e2;
    background: #fff1f2;
    color: #9f1239;
    border-radius: 8px;
    padding: .4rem .55rem;
    margin-bottom: .55rem;
  }

  .delete-counter {
    font-size: .78rem;
    border: 1px solid #d7dce3;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: .2rem .55rem;
    white-space: nowrap;
  }

  .delete-images-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: .55rem;
  }

  .delete-images-modal .image_picker_selector {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: flex-start;
  }

  .delete-images-modal .image_picker_selector li {
    position: relative;
    width: 82px !important;
    height: 110px !important;
    margin: 0 !important;
    list-style: none;
    border-radius: 3px;
  }

  .delete-images-modal .image_picker_selector li .thumbnail {
    width: 82px !important;
    height: 110px !important;
    border-radius: 3px !important;
    border: 1px solid #dbe3ea !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px;
    transition: border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  }

  .delete-images-modal .image_picker_selector li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 3px !important;
    background: #fff;
  }

  /* Sélection forte */
  .delete-images-modal .image_picker_selector li.selected .thumbnail,
  .delete-images-modal .image_picker_selector li .thumbnail.selected {
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 0 0 3px rgba(127, 29, 29, .25) !important;
    filter: brightness(.9) contrast(1.06);
  }

  .delete-images-modal .image_picker_selector li.selected::after {
    content: "\f00d";
    font-family: "FontAwesome";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: #7f1d1d;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
  }

  /* Flags */
  .delete-flag {
    position: absolute;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    z-index: 4;
    pointer-events: none;
  }

  .delete-flag.flag-product {
    left: 4px;
    background: rgba(245, 158, 11, .95);
    color: #111827;
  }

  .delete-flag.flag-declination {
    right: 26px;           /* évite collision avec le X de sélection */
    background: rgba(6, 182, 212, .95);
    color: #fff;
    z-index: 6;
  }


  .delete-decl-badge {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    text-align: center;
    padding: 2px 5px;
    font-size: .62rem;
    font-weight: 600;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    background: rgba(22, 163, 74, .9);
    z-index: 4;
  }

  @media (max-width: 767.98px) {
    .delete-images-modal .image_picker_selector li {
      width: 72px !important;
      height: 96px !important;
    }

    .delete-images-modal .image_picker_selector li .thumbnail {
      width: 72px !important;
      height: 96px !important;
    }

    .delete-images-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
  }
</style>

<form name="images_delete"
      method="post"
      action="{{ path('images_delete_produit', { 'id' : produit.id }) }}"
      enctype="multipart/form-data"
      class="delete-images-modal js-product-delete-images-form">

  <div class="modal-header py-2 d-flex align-items-center justify-content-between">
    <h5 class="modal-title d-flex align-items-center mb-0" id="modalDeleteImagesLabel">
      <i class="fa fa-trash me-2 text-danger"></i>
      Supprimer des images
    </h5>
    <div class="d-flex align-items-center gap-2">
      <i class="fa fa-info-circle text-info"
         data-bs-toggle="tooltip"
         data-bs-placement="left"
         title="Sélectionnez les images à supprimer définitivement. Cette action est irréversible."></i>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
    </div>
  </div>

  <div class="modal-body">
    <div class="delete-note">
      <strong>Attention :</strong> la suppression est définitive. Pensez à vérifier les images principales avant confirmation.
    </div>

    {% if produit.picture %}
      <div class="delete-images-toolbar">
        <div class="delete-images-filters">
          <button type="button" class="delete-pill active" data-filter="all">Toutes</button>
          <button type="button" class="delete-pill" data-filter="main-product">Principale produit</button>
          <button type="button" class="delete-pill" data-filter="main-decl">Principale déclinaison</button>
          <button type="button" class="delete-pill" data-filter="assigned">Affectées déclinaison</button>
          <button type="button" class="delete-pill" data-filter="non-assigned">Non affectées</button>

        </div>

        <div class="delete-images-actions">
          <span id="deleteSelectedCount" class="delete-counter">0 sélectionnée</span>
          <button type="button" class="delete-pill" id="btnSelectAllDelete">Tout sélectionner</button>
          <button type="button" class="delete-pill" id="btnClearAllDelete">Tout désélectionner</button>
        </div>
      </div>

      <div class="delete-images-wrap">
        <select name="images_delete[images][]"
                multiple="multiple"
                class="image-picker show-html w-100 delete-images-picker"
                id="delete_images_picker">
          <option value=""></option>
          {% for item in produit.picture %}
            {% set labels = declByImage[item.imageName]|default([]) %}
            <option
              value="{{ item.id }}"
              data-img-src="{{ app.request.getSchemeAndHttpHost() }}{{ vich_uploader_asset(item, 'file') }}"
              data-decl-labels="{{ labels|join(' / ')|e('html_attr') }}"
              data-is-main-product="{{ item.isSelected ? '1' : '0' }}"
              data-is-main-decl="{{ mainDeclByImageName[item.imageName]|default(false) ? '1' : '0' }}">
              Image {{ item.id }}
            </option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <div class="d-flex align-items-center justify-content-center" style="min-height: 120px;">
        <div class="alert alert-warning mb-0 text-center">
          Aucune image n'est disponible pour ce produit.
        </div>
      </div>
    {% endif %}
  </div>

  <div class="modal-footer d-flex justify-content-center gap-3">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
    {% if produit.picture %}
      <button type="submit" class="btn btn-dark" id="confirmDeleteImagesBtn" disabled>Confirmer</button>

    {% endif %}
  </div>
</form>