{# --- Fenetre modale : selection de l'image principale --- #}
<style>


.declination-badge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  min-width: 90px;
  text-align: center;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 10px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.declination-badge.badge-assigned { background: rgba(40,167,69,0.6); }
.declination-badge.badge-unassigned { background: rgba(220,53,69,0.9); }
.badge-main-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,193,7,0.95);
  color: #212529;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
}
</style>

<form method="post" action="{{ path('produit_set_main_image', { 'id': produit.id }) }}">

    {# --- En-tete --- #}
    <div class="modal-header bg-white text-white py-3 d-flex align-items-center justify-content-between">
      <h5 class="modal-title d-flex align-items-center" id="modalSelectMainImageLabel">
        <i class="fa fa-star me-2 text-primary"></i>
        Definir l'image principale du produit
      </h5>
      <div class="d-flex align-items-center gap-2">
        <i class="fa fa-info-circle text-info ms-2"
           style="font-size: 1rem;"
           data-bs-toggle="tooltip"
           data-html="true"
           data-placement="left"
           title="
             <strong>Info :</strong><br>
             Choisissez l'image principale du produit.<br>
             Elle sera utilisee comme image principale sur les fiches et listes produits.
           ">
        </i>
        <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>

    {# --- Corps --- #}
    <div class="modal-body bg-light">
      <div class="border rounded p-3 bg-white shadow-sm">
        <select name="selectFile" class="image-picker show-html w-100" required>
          <option value=""></option>
          {% for item in produit.picture %}
            {% set labels = declByImage[item.imageName]|default([]) %}
            <option
              data-img-src="{{ app.request.getSchemeAndHttpHost() ~ vich_uploader_asset(item, 'file') }}"
              data-img-label=" "
              data-decl-labels="{{ labels|join(' / ')|e('html_attr') }}"
              data-is-main="{{ item.imageName == mainImageName ? '1' : '0' }}"
              value="{{ item.id }}"
              {% if item.isSelected %}selected{% endif %}>
              Image {{ item.id }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>

    {# --- Pied de page --- #}
    <div class="modal-footer d-flex justify-content-center gap-3 bg-light">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
      <button type="submit" class="btn btn-dark loader-submit-modal">
        Confirmer
      </button>
    </div>
</form>