{% extends "admin/base.html" %}
{% block title %}
 History
{% endblock %}
{% block content %}
{% set prefix = dashboard.url_prefix if dashboard else (url_prefix if url_prefix else '/admin') %}
<div class="corporate-page history-page">
  <header class="corporate-header">
    <div>
      <p class="admin-eyebrow">Record history</p>
      <h1>{{ model.get_verbose_name()|title }} history</h1>
      <p class="corporate-subtitle">Track changes to record <strong>#{{ object_id }}</strong> and inspect the event payload retained by the audit stream.</p>
    </div>
    <div class="corporate-actions">
      <a class="corporate-button corporate-button-muted" href="{{ prefix }}/{{ model.get_name() }}/{{ object_id }}">
        <i class="fas fa-arrow-left"></i>
        <span>View record</span>
      </a>
      {% if can_change %}
      <a class="corporate-button corporate-button-primary" href="{{ prefix }}/{{ model.get_name() }}/{{ object_id }}/edit">
        <i class="fas fa-pen"></i>
        <span>Edit record</span>
      </a>
      {% endif %}
    </div>
  </header>
  <div class="record-form-layout">
    <section class="corporate-panel">
      <div class="corporate-panel-header">
        <div>
          <p class="corporate-kicker">Current snapshot</p>
          <h2>Record overview</h2>
        </div>
        <span class="corporate-badge corporate-badge-neutral">
          {{ entries|length }} events
        </span>
      </div>{% if object %}<dl class="record-summary-list">
        {% for field in model.fields or ['id', 'name'] %}<div>
        <dt>{{ field|replace('_', ' ')|title }}</dt>
        <dd>{{ model.display_value(object, field) }}</dd>
      </div>{% endfor %}</dl>{% else %}
      <div class="corporate-empty compact">
        <i class="fas fa-file-circle-question"></i>
        <strong>Current record unavailable</strong>
        <p>The history remains available, but the record may have been deleted.</p>
      </div>{% endif %}</section>
      <aside class="corporate-panel">
        <p class="corporate-kicker">Audit guidance</p>
        <h2>Understanding revisions</h2>
        <p class="corporate-muted">
          Each event records the action, actor, resource, record identifier, and structured details supplied by the application. When a change hook includes <code>before</code> and <code>after</code> values, the comparison is shown below.
        </p>
        <div class="corporate-note">
          <i class="fas fa-shield-halved"></i>
          <span>Restoration is intentionally performed through your application's approved workflow so business rules and transactions are respected.</span>
        </div>
      
      </aside>
    </div>
  <section class="corporate-panel">
    <div class="corporate-panel-header">
      <div>
        <p class="corporate-kicker">Newest first</p>
        <h2>Change timeline</h2>
      </div>
    </div>
    <div class="history-timeline">
      {% for entry in entries %}
      <article class="history-event">
        
        <div class="history-marker">
          <i class="fas fa-{{ 'plus' if 'created' in entry.action else 'pen' if 'updated' in entry.action else 'trash' if 'deleted' in entry.action else 'bolt' }}">

          </i>
        </div>
        <div class="history-event-body">
          <div class="history-event-heading">
            <div>
              <h3>{{ entry.action|replace('_', ' ')|title }}</h3>
              <p>{{ entry.username }} <span>-</span> <time data-timestamp="{{ entry.timestamp }}">{{ entry.timestamp }}</time></p>
            </div>
            {% if entry.record_id %}
            <span class="corporate-badge corporate-badge-neutral">#{{ entry.record_id }}</span>
            {% endif %}
          
          </div>
          {% if entry.details and entry.details.before is defined and entry.details.after is defined %}
          <div class="history-compare">
            <div><h4>Before</h4>
              <pre class="corporate-code">{{ entry.details.before|tojson(indent=2) }}</pre>
            </div>
            <div>
              <h4>After</h4>
              <pre class="corporate-code">{{ entry.details.after|tojson(indent=2) }}</pre>
            </div>
          </div>{% elif entry.details %}
          <details class="corporate-details">
            <summary>View event details</summary>
            <pre class="corporate-code">{{ entry.details|tojson(indent=2) }}</pre>
          </details>{% else %}
          <p class="corporate-muted">No additional change payload was recorded.</p>
          {% endif %}</div>
        </article>
        {% else %}
        <div class="corporate-empty"><i class="fas fa-clock-rotate-left"></i>
          <strong>No history recorded</strong>
          <p>Changes to this record will appear here.</p>
        </div>
        {% endfor %}
      </div>
    </section>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
document.querySelectorAll('[data-timestamp]').forEach(node => { const value = Number(node.dataset.timestamp); 
if (Number.isFinite(value) && value > 0) node.textContent = new Date(value * 1000).toLocaleString(); });
</script>
{% endblock %}