{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Audit Entry{% endblock %}
{% block page_title %}Audit Entry{% endblock %}
{% block page_subtitle %}Trace {{ entry.trace_id|truncate_id:16 }}{% endblock %}
{% block layer_indicator %}L6 Audit · L7 Temporal{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'audit_list' %}" class="text-sm text-brand-600 hover:text-brand-800">&larr; Back to Audit Trail</a>
</div>

{# Entry details #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 mb-6">
  <h4 class="text-sm font-semibold text-slate-900 mb-4">Entry Details</h4>
  <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Trace ID</dt>
      <dd class="mt-1 text-sm font-mono text-slate-900">{{ entry.trace_id }}</dd>
    </div>
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Sequence</dt>
      <dd class="mt-1 text-sm text-slate-900">{{ entry.seq|default:"—" }}</dd>
    </div>
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Action</dt>
      <dd class="mt-1">{% include "components/_state_badge.html" with state=entry.action %}</dd>
    </div>
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Actor</dt>
      <dd class="mt-1 text-sm font-mono text-slate-900">{{ entry.actor_id }}</dd>
    </div>
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Target Type</dt>
      <dd class="mt-1 text-sm text-slate-900">{{ entry.target_type }}</dd>
    </div>
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Target ID</dt>
      <dd class="mt-1 text-sm font-mono text-slate-900">{{ entry.target_id }}</dd>
    </div>
    {% if entry.scope_id %}
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Scope</dt>
      <dd class="mt-1 text-sm font-mono text-slate-900">{{ entry.scope_id }}</dd>
    </div>
    {% endif %}
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Timestamp</dt>
      <dd class="mt-1 text-sm text-slate-900">{{ entry.timestamp|format_dt }}</dd>
    </div>
  </dl>
</div>

{# Hash chain #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 mb-6">
  <h4 class="text-sm font-semibold text-slate-900 mb-4">Hash Chain</h4>
  <dl class="space-y-3">
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Entry Hash</dt>
      <dd class="mt-1 text-xs font-mono text-slate-700 bg-slate-50 rounded px-3 py-2 break-all">{{ entry.hash|default:"—" }}</dd>
    </div>
    {% if entry.prev_hash %}
    <div>
      <dt class="text-xs font-medium text-slate-500 uppercase">Previous Hash</dt>
      <dd class="mt-1 text-xs font-mono text-slate-700 bg-slate-50 rounded px-3 py-2 break-all">{{ entry.prev_hash }}</dd>
    </div>
    {% endif %}
  </dl>
</div>

{# Before / After state #}
{% if before_state or after_state %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
    <h4 class="text-sm font-semibold text-slate-900 mb-3">Before State</h4>
    {% if before_state %}
    <pre class="json-display bg-slate-50 rounded-lg p-4 text-xs font-mono text-slate-700 overflow-x-auto">{{ before_state|pretty_json }}</pre>
    {% else %}
    <p class="text-sm text-slate-400">No prior state (initial creation).</p>
    {% endif %}
  </div>
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
    <h4 class="text-sm font-semibold text-slate-900 mb-3">After State</h4>
    {% if after_state %}
    <pre class="json-display bg-slate-50 rounded-lg p-4 text-xs font-mono text-slate-700 overflow-x-auto">{{ after_state|pretty_json }}</pre>
    {% else %}
    <p class="text-sm text-slate-400">No resulting state recorded.</p>
    {% endif %}
  </div>
</div>
{% endif %}

{# Rollback action #}
<div class="bg-white rounded-xl border border-red-200 shadow-sm p-6">
  <div class="flex items-start justify-between">
    <div>
      <h4 class="text-sm font-semibold text-red-900">Rollback This Action</h4>
      <p class="text-xs text-red-600 mt-1">This will reverse the action to its previous state. All changes are versioned and traceable (Invariant 9).</p>
    </div>
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="action" value="rollback">
      <button type="submit" onclick="return confirm('Are you sure you want to rollback this action?')" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors">
        Rollback
      </button>
    </form>
  </div>
</div>
{% endblock %}