{% extends "admin/base_site.html" %}
{% load i18n %}
{% load l10n %}

{% block extrahead %}
  {{ block.super }}
  <style>
    html:has(body.deepl-usage) {
      height: 100%;
    }
    body.deepl-usage {
      box-sizing: border-box;
      height: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
    }
    body.deepl-usage .skip-to-content-link,
    body.deepl-usage #footer {
      display: none;
    }
    body.deepl-usage #container {
      box-sizing: border-box;
      min-width: 0;
      min-height: 100vh;
      min-height: 100%;
      width: 100%;
      max-width: 40rem;
      margin: 0 auto;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
    }
    body.deepl-usage #main,
    body.deepl-usage #content-start {
      flex: 0 0 auto;
      width: 100%;
    }
    body.deepl-usage #content {
      max-width: none;
      width: 100%;
      padding: 0;
      margin: 0;
      text-align: center;
    }
    body.deepl-usage #content h1 {
      font-size: 1.25rem;
      margin: 0 0 1rem;
    }
    .deepl-usage-panel {
      width: 100%;
    }
    .deepl-usage-error {
      padding: 12px 16px;
      margin: 0;
      border: 1px solid #f5c2c7;
      background-color: #f8d7da;
      color: #842029;
      border-radius: 4px;
    }
    .deepl-usage-summary {
      margin: 0;
      font-size: 1.05em;
      line-height: 1.4;
      font-variant-numeric: tabular-nums;
    }
    .deepl-usage-bar {
      margin-top: 1rem;
      height: 1.25rem;
      background: #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
    }
    .deepl-usage-bar-fill {
      height: 100%;
      background: #0d6efd;
      transition: width 0.2s ease;
    }
    .deepl-usage-bar-fill.deepl-usage-bar-warning {
      background: #ffc107;
    }
    .deepl-usage-bar-fill.deepl-usage-bar-danger {
      background: #dc3545;
    }
  </style>
{% endblock %}

{% block bodyclass %}{{ block.super }} deepl-usage{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
  <div class="deepl-usage-panel">
    <h1>{% translate "DeepL API usage" %}</h1>

    {% if error %}
      <div role="alert" class="deepl-usage-error">{{ error }}</div>
    {% elif usage_display %}
      <p class="deepl-usage-summary">{{ usage_display.summary }}</p>
      {% if usage_display.percentage_bar_width is not None %}
        <div
          class="deepl-usage-bar"
          role="progressbar"
          aria-valuenow="{{ usage_display.percentage }}"
          aria-valuemin="0"
          aria-valuemax="100"
        >
          <div
            class="deepl-usage-bar-fill{% if usage_display.percentage >= 100 %} deepl-usage-bar-danger{% elif usage_display.percentage >= 80 %} deepl-usage-bar-warning{% endif %}"
            style="width: {{ usage_display.percentage_bar_width|unlocalize }}%;"
          ></div>
        </div>
      {% endif %}
    {% endif %}
  </div>
{% endblock %}