{% extends "base.html" %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% block title %}
    {% trans "Revision for" %} {{ secret.name }}
{% endblock %}
{% block content %}
    <div class="container">
        {# --- Header and Warning Banner --- #}
        <div class="alert alert-warning text-center" role="alert">
            <i class="fa fa-exclamation-triangle"></i>
            {% if shown_change %}
                {% blocktrans with date=shown_change.created|naturaltime user=shown_change.actor.username %}
      You are viewing a <strong>change</strong> from {{ date }} by {{ user }}. <strong> This is not the current version.</strong>
                {% endblocktrans %}
            {% else %}
                {% blocktrans with date=revision.created|naturaltime user=revision.set_by.username %}
                    You are viewing a historical revision of this secret created on <strong>{{ date }}</strong> by <strong>{{ user }}</strong>. This is not the current version.
                {% endblocktrans %}
                <a href="{{ secret.get_absolute_url }}" class="alert-link ms-2">{% trans "View Current Version" %}</a>
            {% endif %}
            {% if restore_allowed %}
                <span class="mx-2 text-muted">|</span>
                <form method="post"
                      action="{% url 'restore_secret_revision' secret.hashid revision.hashid %}?change={{ shown_change.hashid }}"
                      class="d-inline">
                    {% csrf_token %}
                    <button type="submit"
                            class="btn btn-sm btn-outline-danger"
                            data-bs-toggle="tooltip"
                            data-bs-placement="bottom"
                            title="{% trans 'Restore this revision and make it the current version' %}">
                        <i class="fa fa-undo fa-fw"></i>
                        {% trans "Restore" %}
                    </button>
                </form>
            {% endif %}
        </div>
        {% if restore_event %}
          <div class="alert alert-info" role="alert">
            <i class="fa fa-undo"></i>
            Restored from revision
            <code>
              <a href="{% url 'secrets.revision-detail' revision_hashid=restore_event.restored_from.revision.hashid %}?change={{ restore_event.restored_from.hashid }}">
                {{ restore_event.restored_from.revision.hashid }}
              </a>
            </code>
            ({{ restore_event.created|naturaltime }}).
          </div>
        {% endif %}
        {% if meta.status == SecretStatus.NEEDS_CHANGING %}
          <div class="alert alert-danger" role="alert">
            <i class="fa fa-exclamation-triangle"></i>
            This revision is marked as <strong>needs changing</strong>.
          </div>
        {% endif %}
        <div class="row mb-3 justify-content-between align-items-end px-0 text-break">
            <div class="col h2 mb-0 flex-grow-1">
                <a href="{{ secret.get_absolute_url }}">Revision of {{ secret.name }}</a>
            </div>

            <div class="col-auto d-flex align-items-center text-muted text-nowrap">
                <i class="fa fa-clock me-1"></i>
                <time datetime="{{ revision.created|date:'c' }}" class="small">
                    {{ revision.created|date:'DATETIME_FORMAT' }}
                </time>
            </div>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{% url 'secrets.secret-list' %}">{% trans "Secrets" %}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ secret.get_absolute_url }}">{{ secret.name }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{% trans "Revision" %}</li>
            </ol>
        </nav>
        {# — Main card — #}
        <div class="card shadow">
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-3">{% trans "Username" %}</dt>
                    <dd class="col-sm-9">
                        {{ meta.username|default:"–" }}
                    </dd>
                    <dt class="col-sm-3">{% trans "URL" %}</dt>
                    <dd class="col-sm-9 text-break">
                        {{ meta.url|default:"–" }}
                    </dd>
                    {% if secret.content_type == ContentType.FILE %}
                        <dt class="col-sm-3">{% trans "File" %}</dt>
                        <dd class="col-sm-9">
                            <a href="{% url 'secrets.revision-download' revision_hashid=revision.hashid %}"
                               class="btn btn-sm btn-outline-secondary">
                                <i class="fa fa-download"></i> {{ meta.filename|default:_("Download") }}
                            </a>
                        </dd>
                    {% elif secret.content_type == ContentType.PASSWORD %}
                        <dt class="col-sm-3">{% trans "Password" %}</dt>
                        <dd class="col-sm-9">
                            <code id="password-hidden">••••••••••••</code>
                            <code id="password-revealed" class="d-none">{{ decrypted_data.password }}</code>
                            <button id="reveal-btn" class="btn btn-sm btn-outline-secondary ms-2">
                                <i class="fa fa-eye"></i>
                            </button>
                        </dd>
                    {% elif secret.content_type == ContentType.CC %}
                        {# — Cardholder — #}
                        <dt class="col-sm-3">{% trans "Cardholder" %}</dt>
                        <dd class="col-sm-9">
                            {{ decrypted_data.holder|default:"–" }}
                        </dd>

                        {# — Card number — #}
                        <dt class="col-sm-3">{% trans "Card number" %}</dt>
                        <dd class="col-sm-9">
                            <code id="cc-number-hidden">
                                •••• •••• •••• {{ decrypted_data.number|slice:"-4:" }}
                            </code>
                            <code id="cc-number-revealed" class="d-none">
                                {{ decrypted_data.number }}
                            </code>
                            <button id="cc-number-btn"
                                    class="btn btn-sm btn-outline-secondary ms-2">
                                <i class="fa fa-eye"></i>
                            </button>
                        </dd>

                        {# — Expiry — #}
                        <dt class="col-sm-3">{% trans "Expiry" %}</dt>
                        <dd class="col-sm-9">
                            {{ decrypted_data.expiration_month }}/{{ decrypted_data.expiration_year }}
                        </dd>

                        {# — CVV  — #}
                        <dt class="col-sm-3">CVV</dt>
                        <dd class="col-sm-9">
                            <code id="cc-cvv-hidden">•••</code>
                            <code id="cc-cvv-revealed" class="d-none">
                                {{ decrypted_data.security_code }}
                            </code>
                            <button id="cc-cvv-btn"
                                    class="btn btn-sm btn-outline-secondary ms-2">
                                <i class="fa fa-eye"></i>
                            </button>
                        </dd>

                        {# — Card password  — #}
                        <dt class="col-sm-3">{% trans "Password" %}</dt>
                        <dd class="col-sm-9">
                            <code id="cc-pass-hidden">••••••••</code>
                            <code id="cc-pass-revealed" class="d-none">
                                {{ decrypted_data.password }}
                            </code>
                            <button id="cc-pass-btn"
                                    class="btn btn-sm btn-outline-secondary ms-2">
                                <i class="fa fa-eye"></i>
                            </button>
                        </dd>
                    {% endif %}
                    <dt class="col-sm-3">{% trans "Description" %}</dt>
                    <dd class="col-sm-9">
                        <pre>{{ meta.description|default:"–" }}</pre>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <script>
document.addEventListener('DOMContentLoaded', () => {
  /* -------- password reveal (if present) ---------- */
  const pwdBtn = document.getElementById('reveal-btn');
  if (pwdBtn) {
    const pwdHidden   = document.getElementById('password-hidden');
    const pwdRevealed = document.getElementById('password-revealed');
    pwdBtn.addEventListener('click', e => {
      e.preventDefault();
      pwdHidden.classList.toggle('d-none');
      pwdRevealed.classList.toggle('d-none');
      const ic = pwdBtn.querySelector('i');
      ic.classList.toggle('fa-eye');
      ic.classList.toggle('fa-eye-slash');
    });
  }

  /* --- reusable reveal helpers for CC fields --- */
  const setupReveal = (btnId, hidId, revId) => {
    const b = document.getElementById(btnId);
    if (!b) return;
    const h = document.getElementById(hidId);
    const r = document.getElementById(revId);
    b.addEventListener('click', e => {
      e.preventDefault();
     h.classList.toggle('d-none');
      r.classList.toggle('d-none');
      const ic = b.querySelector('i');
      ic.classList.toggle('fa-eye');
      ic.classList.toggle('fa-eye-slash');
   });
  };

  setupReveal('cc-number-btn', 'cc-number-hidden', 'cc-number-revealed');
  setupReveal('cc-cvv-btn',   'cc-cvv-hidden',   'cc-cvv-revealed');
  setupReveal('cc-pass-btn',  'cc-pass-hidden',  'cc-pass-revealed');
});
    </script>
{% endblock %}