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

{% block extrastyle %}
  {{ block.super }}
  <style>
    .temp-password-wrapper {
      display: grid;
      gap: 20px;
      max-width: 760px;
    }

    .temp-password-summary {
      background: var(--temp-summary-bg, #f6fbff);
      border: 1px solid var(--temp-summary-border, #cfe4ff);
      border-radius: 8px;
      padding: 16px 18px;
    }

    .temp-password-summary strong {
      color: var(--temp-summary-strong, #0f4bac);
    }

    .temp-password-grid {
      display: grid;
      gap: 12px;
    }

    .temp-password-field {
      background: var(--body-bg, #ffffff);
      border: 1px solid var(--hairline-color, #dcdfe6);
      border-radius: 8px;
      display: grid;
      grid-template-columns: 160px 1fr;
      padding: 12px 14px;
      align-items: start;
    }

    .temp-password-field label {
      font-weight: 600;
      color: var(--body-quiet-color, #4c5561);
      margin: 0;
    }

    .temp-password-field .value {
      color: var(--body-fg, #0f172a);
      word-break: break-word;
    }

    .temp-password-field code {
      background: #0f172a;
      color: #f8fafc;
      border-radius: 6px;
      padding: 6px 8px;
      display: inline-block;
      font-size: 14px;
      letter-spacing: 0.5px;
    }

    .temp-password-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .temp-password-actions .button.default {
      margin: 0;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: light dark;
        --temp-summary-bg: rgba(46, 59, 78, 0.55);
        --temp-summary-border: rgba(207, 228, 255, 0.35);
        --temp-summary-strong: #cbd8ff;
        --body-bg: #0f172a;
        --body-fg: #e2e8f0;
        --body-quiet-color: #cbd5e1;
        --hairline-color: rgba(226, 232, 240, 0.4);
      }

      .temp-password-field code {
        background: #e2e8f0;
        color: #0f172a;
      }
    }
  </style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> ›
  <a href="{% url 'admin:password_change' %}">{% trans 'Password change' %}</a> ›
  {% trans 'Temporary password' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <div class="temp-password-wrapper">
    <div class="messagelist">
      <div class="success">
        {% blocktrans with username=username %}A new temporary password has been created for {{ username }}.{% endblocktrans %}
      </div>
    </div>

    <div class="temp-password-summary">
      <p>
        <strong>{% trans 'Keep this password secure.' %}</strong>
        {% trans 'Use it immediately to sign in or update your password before it expires.' %}
      </p>
      <p class="help">
        {% trans 'Store the password somewhere safe. If it is lost, generate a new one instead of reusing this code.' %}
      </p>
    </div>

    <div class="module aligned wide">
      <h2>{% trans 'Temporary password details' %}</h2>
      {% if allow_change %}
        <p class="help">
          {% trans 'You can use this temporary password as the old password when changing it.' %}
        </p>
      {% endif %}

      <div class="temp-password-grid">
        <div class="temp-password-field">
          <label>{% trans 'Username' %}</label>
          <div class="value">{{ username }}</div>
        </div>
        <div class="temp-password-field">
          <label>{% trans 'Temporary password' %}</label>
          <div class="value"><code>{{ password }}</code></div>
        </div>
        <div class="temp-password-field">
          <label>{% trans 'Expires at' %}</label>
          <div class="value">{{ expires_at|date:"DATETIME_FORMAT" }}</div>
        </div>
      </div>
    </div>

    <div class="temp-password-actions submit-row">
      <a class="button" href="{{ return_url }}">{% trans 'Return to password change' %}</a>
      <a class="button default" href="{% url 'admin-request-temp-password' %}">{% trans 'Generate another password' %}</a>
    </div>
  </div>
</div>
{% endblock %}