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

{% block title %}{{ 'admin.email_templates.title'|trans }}{% endblock %}

{% block sidebar %}
<div class="sidebar">
    <h5 class="mb-4">{{ 'admin.sidebar.title'|trans }}</h5>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_admin_dashboard') }}">
                <i class="fas fa-tachometer-alt me-2"></i> {{ 'admin.sidebar.dashboard'|trans }}
            </a>
        </li>
        {% if is_granted('ROLE_SUPER_ADMIN') or app.user.isAdmin() and permission_service.hasPermission(app.user, 'manage_users') %}
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_admin_users') }}">
                <i class="fas fa-users me-2"></i> {{ 'admin.sidebar.users'|trans }}
            </a>
        </li>
        {% endif %}
        {% if is_granted('ROLE_SUPER_ADMIN') or app.user.isAdmin() and permission_service.hasPermission(app.user, 'edit_email_templates') %}
        <li class="nav-item">
            <a class="nav-link active" href="{{ path('app_admin_email_templates') }}">
                <i class="fas fa-envelope me-2"></i> {{ 'admin.sidebar.email_templates'|trans }}
            </a>
        </li>
        {% endif %}
        {% if is_granted('ROLE_SUPER_ADMIN') or app.user.isAdmin() and permission_service.hasPermission(app.user, 'translate_content') %}
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_admin_translations') }}">
                <i class="fas fa-language me-2"></i> {{ 'admin.sidebar.translations'|trans }}
            </a>
        </li>
        {% endif %}
    </ul>
    
    {% if is_granted('ROLE_SUPER_ADMIN') %}
    <h5 class="mb-3 mt-4">{{ 'admin.sidebar.super_admin'|trans }}</h5>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="{{ path('app_super_admin_dashboard') }}">
                <i class="fas fa-shield-alt me-2"></i> {{ 'admin.sidebar.super_dashboard'|trans }}
            </a>
        </li>
    </ul>
    {% endif %}
</div>
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">{{ 'admin.email_templates.title'|trans }}</h1>
        <a href="{{ path('app_admin_email_template_new') }}" class="btn btn-gradient">
            <i class="fas fa-plus me-1"></i> {{ 'admin.email_templates.new_btn'|trans }}
        </a>
    </div>
    
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h5 class="mb-0">{{ 'admin.email_templates.list'|trans }}</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>{{ 'admin.email_templates.code'|trans }}</th>
                            <th>{{ 'admin.email_templates.subject'|trans }}</th>
                            <th>{{ 'admin.email_templates.translations'|trans }}</th>
                            <th>{{ 'admin.email_templates.updated_at'|trans }}</th>
                            <th>{{ 'admin.email_templates.actions'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for code, localeTemplates in templates %}
                            <tr>
                                <td class="fw-bold">{{ code }}</td>
                                <td>
                                    {% if localeTemplates['fr'] is defined %}
                                        {{ localeTemplates['fr'].subject }}
                                    {% elseif localeTemplates|first %}
                                        {{ localeTemplates|first.subject }}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if is_granted('ROLE_SUPER_ADMIN') or permission_service.hasPermission(app.user, 'preview_email_templates') %}
                                        {% if localeTemplates['fr'] is defined %}
                                            <a href="#" class="badge bg-primary me-1 preview-template" data-id="{{ localeTemplates['fr'].id }}" title="{{ 'admin.email_templates.preview'|trans }} (FR)" data-bs-toggle="tooltip">FR</a>
                                        {% endif %}
                                        {% if localeTemplates['nl'] is defined %}
                                            <a href="#" class="badge bg-primary me-1 preview-template" data-id="{{ localeTemplates['nl'].id }}" title="{{ 'admin.email_templates.preview'|trans }} (NL)" data-bs-toggle="tooltip">NL</a>
                                        {% endif %}
                                        {% if localeTemplates['en'] is defined %}
                                            <a href="#" class="badge bg-primary me-1 preview-template" data-id="{{ localeTemplates['en'].id }}" title="{{ 'admin.email_templates.preview'|trans }} (EN)" data-bs-toggle="tooltip">EN</a>
                                        {% endif %}
                                        {% if localeTemplates['de'] is defined %}
                                            <a href="#" class="badge bg-primary me-1 preview-template" data-id="{{ localeTemplates['de'].id }}" title="{{ 'admin.email_templates.preview'|trans }} (DE)" data-bs-toggle="tooltip">DE</a>
                                        {% endif %}
                                    {% else %}
                                        {% if localeTemplates['fr'] is defined %}<span class="badge bg-primary me-1">FR</span>{% endif %}
                                        {% if localeTemplates['nl'] is defined %}<span class="badge bg-primary me-1">NL</span>{% endif %}
                                        {% if localeTemplates['en'] is defined %}<span class="badge bg-primary me-1">EN</span>{% endif %}
                                        {% if localeTemplates['de'] is defined %}<span class="badge bg-primary me-1">DE</span>{% endif %}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if localeTemplates['fr'] is defined and localeTemplates['fr'].updatedAt %}
                                        {{ localeTemplates['fr'].updatedAt|date('d/m/Y H:i') }}
                                    {% elseif localeTemplates|first and localeTemplates|first.updatedAt %}
                                        {{ localeTemplates|first.updatedAt|date('d/m/Y H:i') }}
                                    {% elseif localeTemplates|first %}
                                        {{ localeTemplates|first.createdAt|date('d/m/Y H:i') }}
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            {{ 'admin.email_templates.manage'|trans }}
                                        </button>
                                        <ul class="dropdown-menu">
                                            {% for locale, template in localeTemplates %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_admin_email_template_edit', {'id': template.id}) }}">
                                                        {{ 'admin.email_templates.edit'|trans }} ({{ locale|upper }})
                                                    </a>
                                                </li>
                                            {% endfor %}
                                            
                                            <li><hr class="dropdown-divider"></li>
                                            
                                            {% if not localeTemplates['fr'] is defined %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_admin_email_template_new', {'code': code, 'locale': 'fr'}) }}">
                                                        {{ 'admin.email_templates.add_translation'|trans }} (FR)
                                                    </a>
                                                </li>
                                            {% endif %}
                                            
                                            {% if not localeTemplates['nl'] is defined %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_admin_email_template_new', {'code': code, 'locale': 'nl'}) }}">
                                                        {{ 'admin.email_templates.add_translation'|trans }} (NL)
                                                    </a>
                                                </li>
                                            {% endif %}
                                            
                                            {% if not localeTemplates['en'] is defined %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_admin_email_template_new', {'code': code, 'locale': 'en'}) }}">
                                                        {{ 'admin.email_templates.add_translation'|trans }} (EN)
                                                    </a>
                                                </li>
                                            {% endif %}
                                            
                                            {% if not localeTemplates['de'] is defined %}
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_admin_email_template_new', {'code': code, 'locale': 'de'}) }}">
                                                        {{ 'admin.email_templates.add_translation'|trans }} (DE)
                                                    </a>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="5" class="text-center py-4">{{ 'admin.email_templates.no_templates'|trans }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h5 class="mb-0">{{ 'admin.email_templates.about'|trans }}</h5>
        </div>
        <div class="card-body">
            <div class="alert alert-info mb-0">
                <h5 class="alert-heading">{{ 'admin.email_templates.variables.title'|trans }}</h5>
                <p>{{ 'admin.email_templates.variables.description'|trans }}</p>
                <hr>
                <ul class="mb-0">
                    <li><code>{{ '{{ firstName }}' }}</code> - {{ 'admin.email_templates.variables.firstName'|trans }}</li>
                    <li><code>{{ '{{ lastName }}' }}</code> - {{ 'admin.email_templates.variables.lastName'|trans }}</li>
                    <li><code>{{ '{{ fullName }}' }}</code> - {{ 'admin.email_templates.variables.fullName'|trans }}</li>
                    <li><code>{{ '{{ email }}' }}</code> - {{ 'admin.email_templates.variables.email'|trans }}</li>
                    <li><code>{{ '{{ domain }}' }}</code> - {{ 'admin.email_templates.variables.domain'|trans }}</li>
                    <li><code>{{ '{{ token }}' }}</code> - {{ 'admin.email_templates.variables.token'|trans }}</li>
                    <li><code>{{ '{{ resetToken }}' }}</code> - {{ 'admin.email_templates.variables.resetToken'|trans }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour la prévisualisation du template -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewModalLabel">{{ 'admin.email_templates.preview'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center py-4" id="previewLoading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">{{ 'admin.email_templates.loading'|trans }}</p>
                </div>
                <iframe id="previewFrame" style="width: 100%; height: 600px; border: none; display: none;"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'admin.email_template_edit.close_btn'|trans }}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialiser les tooltips pour les badges de langue
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Prévisualisation du template en modal
        const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
        const previewFrame = document.getElementById('previewFrame');
        const previewLoading = document.getElementById('previewLoading');
        
        document.querySelectorAll('.preview-template').forEach(function(element) {
            element.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Réinitialiser l'iframe et afficher le loader
                previewFrame.src = '';
                previewFrame.style.display = 'none';
                previewLoading.style.display = 'block';
                
                // Mettre à jour le titre avec la langue
                const language = this.textContent.trim();
                document.getElementById('previewModalLabel').textContent = '{{ 'admin.email_templates.preview'|trans }}' + ' (' + language + ')';
                
                // Afficher la modal
                previewModal.show();
                
                // Charger le contenu
                const id = this.getAttribute('data-id');
                const previewUrl = '{{ path('app_admin_email_template_preview', {'id': 'TEMPLATE_ID'}) }}'.replace('TEMPLATE_ID', id);
                
                // Charger l'URL dans l'iframe après un court délai
                setTimeout(function() {
                    previewFrame.src = previewUrl;
                    
                    // Quand l'iframe est chargée, masquer le loader et afficher l'iframe
                    previewFrame.onload = function() {
                        previewLoading.style.display = 'none';
                        previewFrame.style.display = 'block';
                    };
                }, 500);
            });
        });
    });
</script>
{% endblock %}