{% macro mails_tab(mails, csrf_token, users, total_pages, current_page) %}
<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" onchange="updateFilters()">
                    <option value="">All Statuses</option>
                    <option value="pending">Pending</option>
                    <option value="sent">Sent</option>
                    <option value="failed">Failed</option>
                </select>
                <select class="form-select form-select-sm" id="dateRangeFilter" onchange="updateFilters()">
                    <option value="24h">Last 24 Hours</option>
                    <option value="7d" selected>Last 7 Days</option>
                    <option value="30d">Last 30 Days</option>
                    <option value="all">All Time</option>
                </select>
                <select class="form-select form-select-sm" id="userFilter" onchange="updateFilters()">
                    <option value="">All Recipients</option>
                    {% for user in users %}
                    <option value="{{ user.id }}">{{ user.username }} {{ user.last_name }}</option>
                    {% endfor %}
                </select>
                <button class="btn btn-secondary btn-sm" onclick="clearFilters()">
                    <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 %}
                    <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">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mail Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="fw-bold">Subject:</label>
                    <p id="modalSubject"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Recipient:</label>
                    <p id="modalRecipient"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Status:</label>
                    <p id="modalStatus"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Template:</label>
                    <p id="modalTemplate"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Created At:</label>
                    <p id="modalCreatedAt"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Sent At:</label>
                    <p id="modalSentAt"></p>
                </div>
                <div class="mb-3">
                    <label class="fw-bold">Body:</label>
                    <div id="modalBody" class="border p-3 bg-light"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateFilters() {
    const status = document.getElementById('statusFilter').value;
    const dateRange = document.getElementById('dateRangeFilter').value;
    const userId = document.getElementById('userFilter').value;
    
    fetch(`/settings/mails?status=${status}&date_range=${dateRange}&user_id=${userId}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newTable = doc.querySelector('.table-responsive');
        const newPagination = doc.querySelector('.d-flex.justify-content-between.align-items-center.mt-4');
        
        if (newTable) {
            document.querySelector('.table-responsive').innerHTML = newTable.innerHTML;
        }
        if (newPagination) {
            const existingPagination = document.querySelector('.d-flex.justify-content-between.align-items-center.mt-4');
            if (existingPagination) {
                existingPagination.innerHTML = newPagination.innerHTML;
            } else {
                document.querySelector('.card-body').appendChild(newPagination);
            }
        }
    });
}

function clearFilters() {
    document.getElementById('statusFilter').value = '';
    document.getElementById('dateRangeFilter').value = '7d';
    document.getElementById('userFilter').value = '';
    updateFilters();
}

function changePage(page) {
    const status = document.getElementById('statusFilter').value;
    const dateRange = document.getElementById('dateRangeFilter').value;
    const userId = document.getElementById('userFilter').value;
    
    fetch(`/settings/mails?status=${status}&date_range=${dateRange}&user_id=${userId}&page=${page}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newTable = doc.querySelector('.table-responsive');
        const newPagination = doc.querySelector('.d-flex.justify-content-between.align-items-center.mt-4');
        
        if (newTable) {
            document.querySelector('.table-responsive').innerHTML = newTable.innerHTML;
        }
        if (newPagination) {
            const existingPagination = document.querySelector('.d-flex.justify-content-between.align-items-center.mt-4');
            if (existingPagination) {
                existingPagination.innerHTML = newPagination.innerHTML;
            } else {
                document.querySelector('.card-body').appendChild(newPagination);
            }
        }
    });
}

function viewMailDetails(mailId) {
    fetch(`/settings/mails/${mailId}`)
        .then(response => response.json())
        .then(mail => {
            document.getElementById('modalSubject').textContent = mail.subject;
            document.getElementById('modalRecipient').textContent = mail.recipient;
            document.getElementById('modalStatus').innerHTML = `
                <span class="badge ${mail.status === 'pending' ? 'bg-warning' : mail.status === 'sent' ? 'bg-success' : 'bg-danger'}">
                    ${mail.status}
                </span>
            `;
            document.getElementById('modalTemplate').textContent = mail.template ? mail.template.name : '-';
            document.getElementById('modalCreatedAt').textContent = new Date(mail.created_at).toLocaleString();
            document.getElementById('modalSentAt').textContent = mail.sent_at ? new Date(mail.sent_at).toLocaleString() : '-';
            document.getElementById('modalBody').innerHTML = mail.body;
            
            new bootstrap.Modal(document.getElementById('mailDetailsModal')).show();
        });
}

function downloadMailLog() {
    const status = document.getElementById('statusFilter').value;
    const dateRange = document.getElementById('dateRangeFilter').value;
    const userId = document.getElementById('userFilter').value;
    
    window.location.href = `/settings/mails/download?status=${status}&date_range=${dateRange}&user_id=${userId}`;
}
</script>
{% endmacro %}