{% extends "base.html" %}
{% block title %} - History{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">Certificate History</h1>
</div>

<div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="border-b border-gray-700">
            <tr>
                <th class="text-left p-3 text-gray-400">Serial</th>
                <th class="text-left p-3 text-gray-400">Subject</th>
                <th class="text-left p-3 text-gray-400">Domain</th>
                <th class="text-left p-3 text-gray-400">SANs</th>
                <th class="text-left p-3 text-gray-400">Status</th>
                <th class="text-left p-3 text-gray-400">Issued</th>
                <th class="text-left p-3 text-gray-400">Expires</th>
                <th class="text-left p-3 text-gray-400">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for c in certs %}
            <tr class="border-b border-gray-700/50">
                <td class="p-3 font-mono text-xs">{{ c.serial or '-' }}</td>
                <td class="p-3 font-mono">{{ c.subject }}</td>
                <td class="p-3">{{ c.domain_name or '-' }}</td>
                <td class="p-3 text-xs text-gray-400">{{ c.san or '-' }}</td>
                <td class="p-3">
                    <span class="px-2 py-1 rounded text-xs {% if c.status == 'issued' %}bg-green-900 text-green-300{% elif c.status == 'pending' %}bg-yellow-900 text-yellow-300{% else %}bg-gray-700{% endif %}">
                        {{ c.status }}
                    </span>
                </td>
                <td class="p-3 text-gray-400">{{ c.issued_at[:10] if c.issued_at else '-' }}</td>
                <td class="p-3 text-gray-400">{{ c.expires_at[:10] if c.expires_at else '-' }}</td>
                <td class="p-3">
                    {% if c.status == 'issued' %}
                    <a href="/api/certs/{{ c.id }}/pem" class="text-blue-400 hover:text-blue-300 mr-2">PEM</a>
                    <a href="/api/certs/{{ c.id }}/pfx" class="text-blue-400 hover:text-blue-300">PFX</a>
                    {% elif c.status == 'pending' %}
                    <button hx-post="/api/certs/{{ c.id }}/sign/web" hx-target="#sign-msg-{{ c.id }}"
                            class="text-yellow-400 hover:text-yellow-300">Issue</button>
                    <span id="sign-msg-{{ c.id }}" class="ml-2"></span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            {% if not certs %}
            <tr><td colspan="8" class="p-6 text-center text-gray-500">No certificates yet</td></tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}