{% extends "base.html" %}
{% load static %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-key"></i> {{ title }}
                    </h3>
                </div>

                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <form method="get" class="d-flex">
                                <input type="text" 
                                       name="search" 
                                       class="form-control me-2" 
                                       placeholder="Search by email or name..." 
                                       value="{{ search }}">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                        <div class="col-md-6">
                            <form method="get" class="d-flex justify-content-end">
                                {% if search %}
                                    <input type="hidden" name="search" value="{{ search }}">
                                {% endif %}
                                <select name="status" class="form-select me-2" onchange="this.form.submit()">
                                    <option value="">All Status</option>
                                    <option value="sent" {% if status_filter == 'sent' %}selected{% endif %}>Sent</option>
                                    <option value="failed" {% if status_filter == 'failed' %}selected{% endif %}>Failed</option>
                                    <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                                </select>
                            </form>
                        </div>
                    </div>

                    <!-- Email Logs Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>Date & Time</th>
                                    <th>Recipient</th>
                                    <th>Status</th>
                                    <th>Subject</th>
                                    <th>Error Message</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in logs %}
                                <tr>
                                    <td>
                                        {{ log.sent_at|date:"M d, Y H:i" }}
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ log.recipient_email }}</strong>
                                            {% if log.recipient_name %}
                                                <br><small class="text-muted">{{ log.recipient_name }}</small>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td>
                                        {% if log.status == 'sent' %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check"></i> Sent
                                            </span>
                                        {% elif log.status == 'failed' %}
                                            <span class="badge bg-danger">
                                                <i class="fas fa-times"></i> Failed
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning">
                                                <i class="fas fa-clock"></i> Pending
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small>{{ log.subject|truncatechars:50 }}</small>
                                    </td>
                                    <td>
                                        {% if log.error_message %}
                                            <small class="text-danger">{{ log.error_message|truncatechars:100 }}</small>
                                        {% else %}
                                            <small class="text-muted">-</small>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-2x mb-2"></i>
                                        <br>No password reset emails found.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Summary -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> 
                                Showing {{ logs.count }} password reset email{{ logs.count|pluralize }} 
                                {% if search %}matching "{{ search }}"{% endif %}
                                {% if status_filter %}with status "{{ status_filter }}"{% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}