{% macro mails_tab(mails, csrf_token, users, total_pages, current_page, email_templates, status='', date_range='7d', user_id='', template_id='') %}
<div class="card shadow-sm">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="card-title mb-0">Mail Log</h5>
            <div class="d-flex gap-2">
                <select class="form-select form-select-sm" id="statusFilter">
                    <option value="">All Statuses</option>
                    <option value="pending" {% if status == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="sent" {% if status == 'sent' %}selected{% endif %}>Sent</option>
                    <option value="failed" {% if status == 'failed' %}selected{% endif %}>Failed</option>
                </select>
                <select class="form-select form-select-sm" id="dateRangeFilter">
                    <option value="24h" {% if date_range == '24h' %}selected{% endif %}>Last 24 Hours</option>
                    <option value="7d" {% if date_range == '7d' %}selected{% endif %}>Last 7 Days</option>
                    <option value="30d" {% if date_range == '30d' %}selected{% endif %}>Last 30 Days</option>
                    <option value="all" {% if date_range == 'all' %}selected{% endif %}>All Time</option>
                </select>
                <select class="form-select form-select-sm" id="userFilter">
                    <option value="">All Recipients</option>
                    {% for user in users %}
                    <option value="{{ user.id }}" {% if user_id|int == user.id %}selected{% endif %}>{{ user.username }} {{ user.last_name }}</option>
                    {% endfor %}
                </select>
                <select class="form-select form-select-sm" id="templateFilter">
                    <option value="">All Templates</option>
                    {% for template in email_templates %}
                    <option value="{{ template.id }}" {% if template_id|int == template.id %}selected{% endif %}>{{ template.name }}</option>
                    {% endfor %}
                </select>
                <button class="btn btn-secondary btn-sm" id="clearFiltersBtn">
                    <i class="fas fa-times me-1"></i>Clear Filters
                </button>
                <button class="btn btn-primary btn-sm" onclick="downloadMailLog()">
                    <i class="fas fa-download me-1"></i>Download CSV
                </button>
            </div>
        </div>

        <!-- Mail Table -->
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Created At</th>
                        <th>Recipient</th>
                        <th>Subject</th>
                        <th>Status</th>
                        <th>Template</th>
                        <th>Sent At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for mail in mails.items %}
                    <tr>
                        <td>{{ mail.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>{{ mail.recipient }}</td>
                        <td>{{ mail.subject }}</td>
                        <td>
                            <span class="badge {% if mail.status == 'pending' %}bg-warning{% elif mail.status == 'sent' %}bg-success{% else %}bg-danger{% endif %}">
                                {{ mail.status }}
                            </span>
                        </td>
                        <td>{{ mail.template.name if mail.template else '-' }}</td>
                        <td>{{ mail.sent_at.strftime('%Y-%m-%d %H:%M:%S') if mail.sent_at else '-' }}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary" onclick="viewMailDetails({{ mail.id }})">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if total_pages > 1 %}
        <div class="d-flex justify-content-between align-items-center mt-4">
            <div>
                <button class="btn btn-outline-secondary" onclick="changePage({{ current_page - 1 }})" {% if current_page == 1 %}disabled{% endif %}>
                    <i class="fas fa-chevron-left me-2"></i>Previous
                </button>
                <span class="mx-3">Page {{ current_page }} of {{ total_pages }}</span>
                <button class="btn btn-outline-secondary" onclick="changePage({{ current_page + 1 }})" {% if current_page == total_pages %}disabled{% endif %}>
                    Next<i class="fas fa-chevron-right ms-2"></i>
                </button>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Mail Details Modal -->
<div class="modal fade" id="mailDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--primary-opacity-8);">
                <h5 class="modal-title">
                    <i class="fas fa-envelope me-2" style="color: var(--primary-color);"></i>Mail Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fas fa-user-circle me-2" style="color: var(--primary-color);"></i>
                                    <h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Recipient Information</h6>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold" style="color: var(--primary-color);">Recipient:</label>
                                    <p id="modalRecipient" class="mb-0"></p>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold" style="color: var(--primary-color);">Status:</label>
                                    <p id="modalStatus" class="mb-0"></p>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold" style="color: var(--primary-color);">Template:</label>
                                    <p id="modalTemplate" class="mb-0"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fas fa-clock me-2" style="color: var(--primary-color);"></i>
                                    <h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Timing Information</h6>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold" style="color: var(--primary-color);">Created At:</label>
                                    <p id="modalCreatedAt" class="mb-0"></p>
                                </div>
                                <div class="mb-3">
                                    <label class="fw-bold" style="color: var(--primary-color);">Sent At:</label>
                                    <p id="modalSentAt" class="mb-0"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-envelope-open-text me-2" style="color: var(--primary-color);"></i>
                                <h6 class="card-subtitle mb-0" style="color: var(--primary-color); font-weight: 600;">Message Content</h6>
                            </div>
                            <div class="mb-3">
                                <label class="fw-bold" style="color: var(--primary-color);">Subject:</label>
                                <p id="modalSubject" class="mb-3"></p>
                            </div>
                            <div>
                                <label class="fw-bold" style="color: var(--primary-color);">Body:</label>
                                <div id="modalBody" class="border rounded p-3 mt-2" style="max-height: 300px; overflow-y: auto; background-color: var(--primary-opacity-8);"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="background-color: var(--primary-opacity-8);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/mail-log.js') }}?v={{ 'js/mail-log.js'|asset_version }}"></script>
{% endmacro %} 