{% extends 'base.html.twig' %}

{% block title %}Templates - Rise Mailer{% endblock %}

{% block body %}
<div class="page-header animate-fade-in">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="bi bi-file-earmark-code"></i> Email Templates</h1>
            <p>Create and manage your email templates</p>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
        <a href="{{ path('app_template_new') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> New Template
        </a>
        {% endif %}
    </div>
</div>

<!-- Search Bar -->
<div class="card mb-4 animate-fade-in">
    <div class="card-body p-3">
        <form method="get" class="d-flex gap-2">
            <div class="flex-grow-1">
                <input type="text" name="search" class="form-control" 
                       placeholder="Search templates by name or subject..." 
                       value="{{ search }}" 
                       id="searchInput">
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-search"></i> Search
            </button>
            {% if search %}
            <a href="{{ path('app_template_index') }}" class="btn btn-secondary">
                <i class="bi bi-x-circle"></i> Clear
            </a>
            {% endif %}
        </form>
        {% if search %}
        <small class="text-muted mt-2 d-block">
            Found {{ total }} template(s) matching "{{ search }}"
        </small>
        {% endif %}
    </div>
</div>

<div class="row g-4">
    {% if templates|length > 0 %}
        {% for template in templates %}
        <div class="col-md-6 col-lg-4">
            <div class="card animate-fade-in h-100">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="mb-3">{{ template.name }}</h5>
                    <p class="text-muted mb-3"><strong>Subject:</strong> {{ template.subject }}</p>
                    <p class="text-muted small">Created: {{ template.createdAt|date('M d, Y') }}</p>
                    <div class="d-flex gap-2 mt-auto">
                        {% if is_granted('ROLE_ADMIN') %}
                        <a href="{{ path('app_template_edit', {id: template.id}) }}" class="btn btn-sm btn-primary flex-fill">
                            <i class="bi bi-pencil"></i> Edit
                        </a>
                        {% endif %}
                        <a href="{{ path('app_template_preview', {id: template.id}) }}" class="btn btn-sm btn-secondary" target="_blank">
                            <i class="bi bi-eye"></i> Preview
                        </a>
                        {% if is_granted('ROLE_ADMIN') %}
                        <button onclick="deleteTemplate({{ template.id }})" class="btn btn-sm btn-danger" title="Delete">
                            <i class="bi bi-trash"></i>
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="bi bi-file-earmark-code" style="font-size: 4rem; color: #cbd5e1;"></i>
                <p class="text-muted mt-3">
                    {% if search %}
                        No templates found matching your search.
                    {% else %}
                        No templates available.
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Pagination -->
{% if totalPages > 1 %}
<nav aria-label="Template pagination" class="mt-4">
    <ul class="pagination justify-content-center">
        <!-- Previous Button -->
        <li class="page-item {% if page <= 1 %}disabled{% endif %}">
            <a class="page-link" href="{{ path('app_template_index', {page: page - 1, search: search}) }}">
                <i class="bi bi-chevron-left"></i> Previous
            </a>
        </li>
        
        <!-- Page Numbers -->
        {% for p in 1..totalPages %}
            {% if p == 1 or p == totalPages or (p >= page - 2 and p <= page + 2) %}
                <li class="page-item {% if p == page %}active{% endif %}">
                    <a class="page-link" href="{{ path('app_template_index', {page: p, search: search}) }}">{{ p }}</a>
                </li>
            {% elseif p == page - 3 or p == page + 3 %}
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            {% endif %}
        {% endfor %}
        
        <!-- Next Button -->
        <li class="page-item {% if page >= totalPages %}disabled{% endif %}">
            <a class="page-link" href="{{ path('app_template_index', {page: page + 1, search: search}) }}">
                Next <i class="bi bi-chevron-right"></i>
            </a>
        </li>
    </ul>
</nav>
{% endif %}
{% endblock %}

{% block javascripts %}
<script>
async function deleteTemplate(id) {
    if (!confirm('Are you sure you want to delete this template?')) return;
    
    try {
        const response = await fetch(`/templates/${id}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        });
        
        // Check if response is actually JSON
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            console.error('Received non-JSON response:', response.status, response.statusText);
            alert('Error: Received invalid response from server. You may need to log in again.');
            return;
        }
        
        const data = await response.json();
        
        if (data.success) {
            // Successfully deleted, reload the page
            location.reload();
        } else {
            // Server returned an error
            alert(data.message || 'Error deleting template');
        }
    } catch (error) {
        console.error('Delete error:', error);
        alert('Error deleting template: ' + error.message);
    }
}

// Optional: Auto-submit search on typing (with debounce)
let searchTimeout;
document.getElementById('searchInput')?.addEventListener('input', function(e) {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        if (e.target.value.length >= 3 || e.target.value.length === 0) {
            e.target.form.submit();
        }
    }, 500);
});
</script>
{% endblock %}