{# Generic media detail modal — rendered once in the layout, reused on every
   page. Driven entirely by the client: any element carrying `data-media-open`
   with a JSON payload in `data-media` opens it (see app.js → mediaModal).

   Layout: a left sidebar (metadata) and a right stage (the image, sitting on
   top of its decoded blurhash as a background placeholder). #}
<div class="modal" data-media-modal data-user-base="{{ url_for('users') }}" hidden>
  <div class="modal__panel" role="dialog" aria-modal="true" aria-labelledby="media-modal-title">
    <button class="modal__close" type="button" data-media-close aria-label="Fermer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6L6 18M6 6l12 12"/>
      </svg>
    </button>

    <aside class="modal__sidebar">
      <div class="modal__head">
        <h2 class="modal__title" id="media-modal-title" data-mm-name></h2>
        <div class="modal__badges">
          <span class="badge" data-mm-status hidden></span>
          <span class="badge badge--flag" data-mm-flags hidden></span>
        </div>
      </div>

      {# Author — populated by the detail fetch #}
      <div class="modal__author" data-mm-author hidden>
        <img class="modal__avatar" data-mm-author-avatar alt="" hidden>
        <a class="modal__author-name" data-mm-author-name></a>
        <svg class="modal__verified" data-mm-author-verified hidden viewBox="0 0 24 24" fill="currentColor" aria-label="Vérifié">
          <path d="M12 2l2.4 1.8 3 .1 1 2.8 2.4 1.7-.9 2.9.9 2.9-2.4 1.7-1 2.8-3 .1L12 22l-2.4-1.8-3-.1-1-2.8L3.2 15l.9-2.9-.9-2.9 2.4-1.7 1-2.8 3-.1z"/>
          <path d="M10.6 14.6l-2-2 1.1-1.1.9.9 3-3 1.1 1.1z" fill="#fff"/>
        </svg>
      </div>

      {# Engagement counters — populated by the detail fetch #}
      <div class="modal__stats" data-mm-stats hidden>
        <div class="modal__stat"><span class="modal__stat-val" data-mm-stat="views">—</span><span class="modal__stat-cap">Vues</span></div>
        <div class="modal__stat"><span class="modal__stat-val" data-mm-stat="likes">—</span><span class="modal__stat-cap">J'aime</span></div>
        <div class="modal__stat"><span class="modal__stat-val" data-mm-stat="comments">—</span><span class="modal__stat-cap">Commentaires</span></div>
      </div>

      <div class="modal__row modal__row--text" data-mm-row="description" hidden>
        <dt>Description</dt>
        <dd>
          <strong class="modal__desc-title" data-mm-desc-title hidden></strong>
          <span data-mm-desc-text></span>
        </dd>
      </div>

      <div class="modal__row" data-mm-row="hashtags" hidden>
        <dt>Hashtags</dt>
        <dd class="modal__tags" data-mm-hashtags></dd>
      </div>

      <dl class="modal__meta">
        <div class="modal__row" data-mm-row="country" hidden>
          <dt>Pays</dt>
          <dd class="modal__country">
            <span class="modal__flag" data-mm-flag hidden></span>
            <span data-mm-country></span>
          </dd>
        </div>
        <div class="modal__row" data-mm-row="dimensions" hidden>
          <dt>Dimensions</dt>
          <dd data-mm-dimensions></dd>
        </div>
        <div class="modal__row" data-mm-row="camera" hidden>
          <dt>Appareil</dt>
          <dd data-mm-camera></dd>
        </div>
        <div class="modal__row" data-mm-row="filesize" hidden>
          <dt>Taille du fichier</dt>
          <dd data-mm-filesize></dd>
        </div>
        <div class="modal__row" data-mm-row="shot" hidden>
          <dt>Prise le</dt>
          <dd data-mm-shot></dd>
        </div>
        <div class="modal__row" data-mm-row="date" hidden>
          <dt>Ajouté le</dt>
          <dd data-mm-date></dd>
        </div>
        <div class="modal__row" data-mm-row="id" hidden>
          <dt>Identifiant</dt>
          <dd><code data-mm-id></code></dd>
        </div>
      </dl>

      <div class="modal__row modal__row--map" data-mm-row="location" hidden>
        <dt>Localisation</dt>
        <dd>
          <div class="modal__map" data-mm-map></div>
          <span class="modal__coords" data-mm-coords></span>
        </dd>
      </div>
    </aside>

    <div class="modal__stage" data-mm-stage>
      <canvas class="modal__blur" data-mm-blur width="32" height="32"></canvas>
      <div class="modal__stage-empty" data-mm-preview-empty hidden>Aperçu indisponible</div>
      <img class="modal__img" alt="" data-mm-preview-img hidden>
    </div>
  </div>
</div>