{% extends "pages/sandbox_base.html" %}
{% block title %}Approval History — {{ sandbox_name }} — Shoreguard{% endblock %}

{% block breadcrumb_tail %}
<li class="breadcrumb-item"><a href="/gateways/{{ gateway_name }}/sandboxes/{{ sandbox_name }}/approvals">Approvals</a></li>
<li class="breadcrumb-item active">History</li>
{% endblock %}

{% block content %}
<div x-data='approvalHistoryPage({{ sandbox_name|tojson }})' x-init="load()">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Approval History</h5>
        <a href="/gateways/{{ gateway_name }}/sandboxes/{{ sandbox_name }}/approvals" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back to Approvals
        </a>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading history...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Empty state -->
    <div x-show="!loading && !error && history.length === 0" x-cloak class="text-center text-muted py-5">
        <i class="bi bi-clock-history fs-1 d-block mb-3"></i>
        <p>No approval history yet.</p>
    </div>

    <!-- History table -->
    <template x-if="!loading && !error && history.length > 0">
        <div class="table-responsive">
            <table class="table table-striped table-sm align-middle">
                <thead>
                    <tr>
                        <th>Rule</th>
                        <th>Decision</th>
                        <th>Timestamp</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="entry in history" :key="entry.chunk_id + '-' + entry.timestamp">
                        <tr>
                            <td><strong x-text="entry.rule_name || entry.chunk_id || '\u2014'"></strong></td>
                            <td>
                                <span class="badge"
                                      :class="SG.badges.approval[entry.status] || SG.badges.approval[entry.decision] || 'text-bg-secondary'"
                                      x-text="entry.status || entry.decision || 'unknown'"></span>
                            </td>
                            <td class="text-muted small" x-text="entry.timestamp ? new Date(entry.timestamp).toLocaleString() : '\u2014'"></td>
                            <td class="text-muted small" x-text="entry.reason || '\u2014'"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>
</div>
{% endblock %}

{% block sandbox_js %}
<script src="/static/js/approvals.js"></script>
{% endblock %}