{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <h1>Email &amp; SMS Templates</h1>
    <a class="btn" href="{{ url_for('templates.create') }}">Add Template</a>
</div>

<div class="panel">
    <form method="get" class="bulkbar">
        <select name="type">
            <option value="">All types</option>
            <option value="email" {% if filters.get('type') == 'email' %}selected{% endif %}>Email</option>
            <option value="sms" {% if filters.get('type') == 'sms' %}selected{% endif %}>SMS</option>
        </select>
        <button class="btn btn-sm" type="submit">Filter</button>
        <a class="btn btn-sm" href="{{ url_for('templates.index') }}">Reset</a>
    </form>

    <div class="table-wrap">
        <table class="modern-table">
            <thead><tr><th>Name</th><th>Type</th><th>Subject</th><th>Status</th><th>Body</th><th>Actions</th></tr></thead>
            <tbody>
                {% for t in templates %}
                <tr>
                    <td><strong>{{ t.name }}</strong></td>
                    <td><span class="badge">{{ t.type }}</span></td>
                    <td>{{ t.subject or '-' }}</td>
                    <td><span class="badge">{{ t.status }}</span></td>
                    <td>{{ t.body[:120] }}{% if t.body|length > 120 %}...{% endif %}</td>
                    <td>
                        <a class="btn btn-sm" href="{{ url_for('templates.edit', template_id=t.id) }}">Edit</a>
                        <form method="post" action="{{ url_for('templates.delete', template_id=t.id) }}"
                              onsubmit="return confirm('Delete this template?')" style="display:inline;">
                            <button class="btn btn-sm danger" type="submit">Delete</button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="6" style="text-align:center;">No templates found.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}