{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1200px;">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-shield-check me-2"></i>Appraisal Audit Logs</h4>
    <div class="d-flex gap-2">
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('appraisal.view', appraisal_id=a.id) }}">
        <i class="bi bi-arrow-left me-1"></i>Back to Appraisal
      </a>
    </div>
  </div>

  <div class="card shadow-sm mb-3">
    <div class="card-body row g-2">
      <div class="col-md-4"><span class="text-muted">Appraisal ID:</span> <strong>#{{ a.id }}</strong></div>
      <div class="col-md-4"><span class="text-muted">Employee ID:</span> <strong>{{ a.employee_id }}</strong></div>
      <div class="col-md-4"><span class="text-muted">Status:</span> <span class="badge bg-secondary">{{ a.status }}</span></div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header bg-light"><strong>Recent Actions</strong></div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0 align-middle">
        <thead>
          <tr>
            <th style="width: 170px;">When</th>
            <th style="width: 170px;">By (Employee ID)</th>
            <th style="width: 220px;">Action</th>
            <th>Details</th>
          </tr>
        </thead>
        <tbody>
          {% for l in logs %}
          <tr>
            <td>{{ l.created_at.strftime('%d-%b-%Y %I:%M %p') }}</td>
            <td>{{ l.created_by_id or '-' }}</td>
            <td><span class="badge bg-dark">{{ l.action }}</span></td>
            <td>
              <details>
                <summary class="text-primary" style="cursor:pointer;">View</summary>
                <div class="mt-2">
                  {% if l.old_data %}
                  <div class="mb-2">
                    <div class="text-muted small">Old</div>
                    <pre class="bg-light p-2 rounded small mb-0">{{ l.old_data | tojson(indent=2) }}</pre>
                  </div>
                  {% endif %}

                  {% if l.new_data %}
                  <div>
                    <div class="text-muted small">New</div>
                    <pre class="bg-light p-2 rounded small mb-0">{{ l.new_data | tojson(indent=2) }}</pre>
                  </div>
                  {% endif %}
                </div>
              </details>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="4" class="text-muted p-3">No audit logs.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}