{% extends "base.html" %}

{% block title %}Email Templates{% endblock %}

{% block content %}

<style>
/* ===== PAGE LAYOUT ===== */
.page-container {
    max-width: 1100px;
    margin: auto;
}

/* ===== FORM CARD ===== */
.template-form-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

/* ===== INPUTS ===== */
.field-group input,
.field-group textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 15px;
}

.field-group textarea {
    resize: vertical;
}

/* ===== BUTTON ===== */
.btn-primary {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 10px;
}

/* ===== TEMPLATE LIST ===== */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.template-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.template-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.template-title {
    font-size: 16px;
    font-weight: 700;
    color: #1d3a8a;
    margin-bottom: 6px;
}

.template-subject {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.4;
}

/* ===== SECTION TITLES ===== */
.section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    color: #6c757d;
    font-size: 14px;
    margin-top: 10px;
}
</style>

<div class="page-container">

    <!-- ===== HEADER ===== -->
    <section class="page-header card">
        <p class="eyebrow">Settings</p>
        <h1>Email Templates</h1>
        <p>Create and manage reusable email templates for your team.</p>
    </section>

    <!-- ===== ADD TEMPLATE ===== -->
    <section class="template-form-card">
        <h2 class="section-title">Add New Template</h2>

        {% if error %}
            <div class="alert alert-error">{{ error }}</div>
        {% endif %}
        {% if message %}
            <div class="alert alert-success">{{ message }}</div>
        {% endif %}

        <form action="/dashboard/email-templates" method="post">
            <div class="field-group">
                <label>Template Name</label>
                <input type="text" name="name" placeholder="e.g. Proposal Follow-up" required>
            </div>

            <div class="field-group">
                <label>Email Subject</label>
                <input type="text" name="subject" placeholder="Proposal for {{ '{{ lead.company }}' }}" required>
            </div>

            <div class="field-group">
                <label>Email Body</label>
                <textarea name="body" rows="8" placeholder="Hi {{ '{{ lead.name }}' }},&#10;&#10;Thanks for taking the time to speak with us..." required></textarea>
            </div>

            <div class="button-row">
                <button type="submit" class="btn btn-primary">Save Template</button>
            </div>
        </form>
    </section>

    <!-- ===== EXISTING TEMPLATES ===== -->
    <section>
        <h2 class="section-title">Existing Templates</h2>

        {% if email_templates %}
            <div class="template-grid">
                {% for template in email_templates %}
                    <div class="template-card">
                        <div class="template-title">
                            {{ template.name }}
                        </div>
                        <div class="template-subject">
                            {{ template.subject }}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">No templates found. Create your first template above.</p>
        {% endif %}
    </section>

</div>

{% endblock %}