{% extends "base.html" %}
{% block title %}Historico de Planos{% endblock %}
{% block extra_head %}
<style>
    .history-page { max-width: 1000px; margin: 0 auto; }
    .page-header { margin-bottom: 32px; }
    .page-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .page-header p { color: var(--text-muted); font-size: 0.9em; }
    .history-table { width: 100%; border-collapse: collapse; }
    .history-table th {
        text-align: left; padding: 12px 16px; font-size: 0.75em; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); font-weight: 600;
    }
    .history-table td {
        padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.9em; color: var(--text-secondary);
    }
    .history-table tr:hover td { background: var(--bg-surface); }
    .status-badge { padding: 3px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .status-badge.active { background: rgba(70,211,105,0.1); color: var(--green); }
    .status-badge.expired { background: rgba(128,128,128,0.1); color: var(--text-muted); }
    .status-badge.cancelled { background: rgba(229,9,20,0.1); color: var(--primary); }
    .source-badge { padding: 3px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .source-badge.direct { background: rgba(100,150,255,0.1); color: #6496ff; }
    .source-badge.referral { background: rgba(245,197,24,0.1); color: var(--gold); }
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state .icon { font-size: 3em; margin-bottom: 16px; }
</style>
{% endblock %}
{% block content %}
<div class="history-page">
    <div class="page-header">
        <h1>Historico de Planos</h1>
        <p>Todos os seus planos contratados e seus status.</p>
    </div>
    {% if history %}
    <table class="history-table">
        <thead>
            <tr>
                <th>Plano</th>
                <th>Contratado em</th>
                <th>Expira em</th>
                <th>Status</th>
                <th>Origem</th>
            </tr>
        </thead>
        <tbody>
            {% for h in history %}
            <tr>
                <td style="font-weight:600;color:var(--text-primary);">{{ h.plan_name }}</td>
                <td>{{ h.started_at|bdate }}</td>
                <td>{{ h.expires_at|bdate if h.expires_at else '-' }}</td>
                <td><span class="status-badge {{ h.status }}">{{ h.status|capitalize }}</span></td>
                <td><span class="source-badge {{ h.source }}">{{ 'Direto' if h.source == 'direct' else 'Indicacao' }}</span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <div class="icon">&#x1f4cb;</div>
        <p>Nenhum historico de planos.</p>
    </div>
    {% endif %}
</div>
{% endblock %}