{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Explorer{% endblock %}
{% block heading %}Explorer{% endblock %}
{% block subheading %}Carte des médias géolocalisés{% endblock %}

{% block content %}
  <div data-explore data-bounds-url="{{ boundsUrl }}" data-detail-url="{{ detailUrl }}">
    <div class="alert alert--error" data-explore-error hidden>
      Le service Hydrogen est injoignable — impossible de charger les médias sur la carte.
    </div>

    <article class="card glass explore" data-animate>
      <div class="card__head">
        <h2>Médias publiés</h2>
        <div class="explore__tools">
          <span class="explore__count" data-explore-count>—</span>
          <div class="legend">
            <span class="legend__item"><span class="legend__dot" style="background:var(--ok)"></span>Publié</span>
            <span class="legend__item"><span class="legend__dot" style="background:var(--warn)"></span>En attente</span>
            <span class="legend__item"><span class="legend__dot" style="background:var(--danger)"></span>Rejeté</span>
          </div>
        </div>
      </div>

      <div class="explore__map" data-explore-map>
        <div class="explore__loader skeleton" data-explore-loader></div>
      </div>

      <p class="explore__hint muted">
        Déplace ou zoome la carte pour charger les médias du cadre visible.
        Seuls les médias <strong>publiés</strong> et géolocalisés sont affichés.
      </p>
    </article>
  </div>
{% endblock %}