{% extends 'base.html' %}

{% block title %}Test Email - Notifications{% endblock %}

{% block extra_css %}
<style>
    .test-email-header {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="test-email-header">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="mb-0">
                    <i class="bi bi-envelope"></i> Test Email
                </h1>
                <p class="mb-0 opacity-75">Send a test email to verify your configuration</p>
            </div>
            <div class="col-auto">
                <a href="{% url 'notifications:dashboard' %}" class="btn btn-light">
                    <i class="bi bi-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-envelope"></i> Send Test Email
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label">
                                Email Address <span class="text-danger">*</span>
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="text-danger small">
                                    {{ form.email.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">
                                Enter a valid email address to receive the test email.
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.subject.id_for_label }}" class="form-label">
                                Subject <span class="text-danger">*</span>
                            </label>
                            {{ form.subject }}
                            {% if form.subject.errors %}
                                <div class="text-danger small">
                                    {{ form.subject.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.message.id_for_label }}" class="form-label">
                                Message <span class="text-danger">*</span>
                            </label>
                            {{ form.message }}
                            {% if form.message.errors %}
                                <div class="text-danger small">
                                    {{ form.message.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">
                                Enter the email message content. HTML is supported.
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{% url 'notifications:dashboard' %}" class="btn btn-secondary me-md-2">
                                <i class="bi bi-x-circle"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send"></i> Send Test Email
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Information Card -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle"></i> Important Notes
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li>This will send an actual email to the specified address</li>
                        <li>Make sure your email settings are properly configured in <a href="{% url 'settings:dashboard' %}">Settings</a></li>
                        <li>Check your spam folder if the email doesn't arrive in the inbox</li>
                        <li>The delivery status will be logged and viewable in <a href="{% url 'notifications:email_logs' %}">Email Logs</a></li>
                        <li>HTML content is supported in the message field</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-dismiss alerts after 5 seconds
setTimeout(function() {
    $('.alert').fadeOut('slow');
}, 5000);
</script>
{% endblock %}