{% with data=signatures %}

  <h2 class="cell--title">Signatures électroniques</h2>

  <div class="esign-cell">
    {% if json.numero_bce_commune %}
      <p class="esign-cell--bce">
        Numéro BCE
        <strong>{{ json.numero_bce_commune|slice:":4" }}.{{ json.numero_bce_commune|slice:"4:7" }}.{{ json.numero_bce_commune|slice:"7:" }}</strong>
      </p>
    {% endif %}
    {% if data %}

      <ul class="esign-cell--stats">
        <li>
          <span class="esign-cell--value">{{ data.sign_eid_count|default:0|intcomma }}</span>
          <span class="esign-cell--label">Signatures eID</span>
        </li>
        <li>
          <span class="esign-cell--value">{{ data.seal_count|default:0|intcomma }}</span>
          <span class="esign-cell--label">Sceau électroniques</span>
        </li>
        <li>
          <span class="esign-cell--value">{{ data.invoiced_signatures|default:0|intcomma }}</span>
          <span class="esign-cell--label">Signatures facturées</span>
        </li>
      </ul>

      {% if data.invoiced_signatures %}
        {% with total=data.sign_eid_count|default:0|add:data.seal_count|default:0 %}
          {% widthratio total data.invoiced_signatures 100 as percent %}
          <div class="esign-cell--gauge">
            <div class="esign-cell--gauge-track">
              <span class="esign-cell--gauge-fill" style="width: {{ percent }}%"></span>
            </div>
            <p class="esign-cell--gauge-legend">
              {{ total|intcomma }} signature{{ total|pluralize }} utilisée{{ total|pluralize }}
              sur {{ data.invoiced_signatures|intcomma }} ({{ percent }} %)
            </p>
          </div>
        {% endwith %}
      {% endif %}

    {% else %}
      <p class="esign-cell--empty">Les informations de signature ne sont pas disponibles pour le moment.</p>
    {% endif %}
  </div>

{% endwith %}

<style>
  /* ne pas utiliser la classe cell--body ici : le thème iMio l'annule par
     « div.cell .cell--body { padding: 0 !important } » */
  .esign-cell {
    padding: 1rem;
  }
  .esign-cell > :first-child {
    margin-top: 0;
  }
  .esign-cell > :last-child {
    margin-bottom: 0;
  }
  .esign-cell--bce {
    margin: 0 0 1em 0;
    opacity: 0.8;
  }
  .esign-cell--stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0 0 1.5em 0;
    padding: 0;
    list-style: none;
  }
  .esign-cell--stats li {
    flex: 1 1 8em;
    padding: 0.8em 1em;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
  }
  .esign-cell--value {
    display: block;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.2;
    color: var(--primary-color, #1a4f8a);
  }
  .esign-cell--label {
    display: block;
    font-size: 0.85em;
    opacity: 0.8;
  }
  .esign-cell--gauge-track {
    height: 0.75em;
    border-radius: 0.4em;
    background: var(--border-color, #ddd);
    overflow: hidden;   /* borne l'affichage si le quota est dépassé */
  }
  .esign-cell--gauge-fill {
    display: block;
    height: 100%;
    background: var(--primary-color, #1a4f8a);
    font-size: 3em;
  }
  .esign-cell--gauge-legend {
    margin: 0.5em 0 0 0;
    font-size: 0.9em;
    opacity: 0.8;
  }
  .esign-cell--empty {
    margin: 0;
    padding: 1.6em 1em;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed var(--border-color, #ddd);
    border-radius: 4px;
  }
  /* pictogramme en pseudo-élément : pas de dépendance à une police d'icônes */
  .esign-cell--empty::before {
    content: "ⓘ";
    display: block;
    margin-bottom: 0.2em;
    font-size: 2em;
    line-height: 1;
    color: var(--primary-color, #1a4f8a);
    opacity: 0.55;
  }
</style>