{% extends "base.html" %}

{% block content %}

<div class="page-header">
    <h1>📨 Email Status</h1>

    <form method="get" class="filter-bar">
    <input type="text" name="q" placeholder="Search email"
           value="{{ search or '' }}">

    <select name="status">
        <option value="">All</option>
        <option value="SENT" {{ 'selected' if status=='SENT' }}>Sent</option>
        <option value="FAILED" {{ 'selected' if status=='FAILED' }}>Failed</option>
        <option value="PENDING" {{ 'selected' if status=='PENDING' }}>Pending</option>
    </select>

    <button class="primary-btn">Filter</button>
</form>

</div>

<div class="panel">
    <div class="list-page">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for email in emails %}
            <tr>
                <td>{{ (pagination.page - 1) * pagination.per_page + loop.index }}</td>
                <td>{{ email.email }}</td>
                <td>
                    <span class="badge {{ email.status|lower }}">
                        {{ email.status }}
                    </span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
            <div class="pagination">
    {% if pagination.has_prev %}
            <a href="?page={{ pagination.prev_num }}&q={{ search }}&status={{ status }}">← Prev</a>
        {% endif %}

        <span>Page {{ pagination.page }} of {{ pagination.pages }}</span>

        {% if pagination.has_next %}
            <a href="?page={{ pagination.next_num }}&q={{ search }}&status={{ status }}">Next →</a>
        {% endif %}
    </div>


    </table>
</div>
</div>

{% endblock %}