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

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

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css">
{% 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_template_edit.title'|trans({'%code%': template.code, '%locale%': template.locale|upper}) }}</h1>
        <div class="d-flex">
            <a href="{{ path('app_admin_email_templates') }}" class="btn btn-outline-secondary me-2">
                <i class="fas fa-arrow-left me-1"></i> {{ 'admin.email_template_edit.back_btn'|trans }}
            </a>
            
            {% if is_granted('ROLE_SUPER_ADMIN') or permission_service.hasPermission(app.user, 'preview_email_templates') %}
            <a href="{{ path('app_admin_email_template_preview', {'id': template.id}) }}" target="_blank" class="btn btn-outline-primary me-2">
                <i class="fas fa-eye me-1"></i> {{ 'admin.email_template_edit.preview_btn'|trans }}
            </a>
            {% endif %}
            
            <form method="post" action="{{ path('app_admin_email_template_delete', {'id': template.id}) }}" onsubmit="return confirm('{{ 'admin.email_template_edit.confirm_delete'|trans }}')">
                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ template.id) }}">
                <button type="submit" class="btn btn-outline-danger">
                    <i class="fas fa-trash-alt me-1"></i> {{ 'admin.email_template_edit.delete_btn'|trans }}
                </button>
            </form>
        </div>
    </div>
    
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h5 class="mb-0">{{ 'admin.email_template_edit.form_title'|trans }}</h5>
        </div>
        <div class="card-body">
            {{ form_start(form) }}
                <div class="row mb-3">
                    <div class="col-md-6">
                        {{ form_row(form.code) }}
                    </div>
                    <div class="col-md-6">
                        {{ form_row(form.locale) }}
                    </div>
                </div>
                
                <div class="mb-3">
                    {{ form_row(form.subject) }}
                </div>
                
                <div class="mb-3">
                    {{ form_label(form.htmlContent) }}
                    {{ form_widget(form.htmlContent, {'attr': {'class': 'html-editor form-control'}}) }}
                    {{ form_help(form.htmlContent) }}
                    {{ form_errors(form.htmlContent) }}
                </div>
                
                <div class="mb-3">
                    {{ form_row(form.textContent) }}
                </div>
                
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">{{ 'admin.email_templates.variables.title'|trans }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="firstName">
                                    {{ 'admin.email_templates.variables.firstName'|trans }}
                                </button>
                            </div>
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="lastName">
                                    {{ 'admin.email_templates.variables.lastName'|trans }}
                                </button>
                            </div>
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="fullName">
                                    {{ 'admin.email_templates.variables.fullName'|trans }}
                                </button>
                            </div>
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="email">
                                    {{ 'admin.email_templates.variables.email'|trans }}
                                </button>
                            </div>
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="domain">
                                    {{ 'admin.email_templates.variables.domain'|trans }}
                                </button>
                            </div>
                            <div class="col-md-4 mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 variable-btn" data-variable="token">
                                    {{ 'admin.email_templates.variables.token'|trans }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end">
                    <a href="{{ path('app_admin_email_templates') }}" class="btn btn-outline-secondary me-2">{{ 'admin.email_template_edit.cancel_btn'|trans }}</a>
                    <button type="submit" class="btn btn-gradient">{{ 'admin.email_template_edit.save_btn'|trans }}</button>
                </div>
            {{ form_end(form) }}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize HTML editor
            $('.html-editor').summernote({
                height: 300,
                placeholder: '{{ 'admin.email_templates.editor.placeholder'|trans }}',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                callbacks: {
                    onImageUpload: function(files) {
                        alert('{{ 'admin.email_templates.editor.no_image_upload'|trans }}');
                    }
                }
            });
            
            // Variable buttons
            $('.variable-btn').on('click', function() {
                const variable = $(this).data('variable');
                $('.html-editor').summernote('insertText', '{{ '{{' }} ' + variable + ' {{ '}}' }}');
            });
        });
    </script>
{% endblock %}