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

{% block title %}{{ 'admin.email_template_new.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_new.title'|trans }}</h1>
        <a href="{{ path('app_admin_email_templates') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> {{ 'admin.email_template_new.back_btn'|trans }}
        </a>
    </div>
    
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h5 class="mb-0">{{ 'admin.email_template_new.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_new.cancel_btn'|trans }}</a>
                    <button type="submit" class="btn btn-gradient">{{ 'admin.email_template_new.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: `<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nouveau template d'email</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: linear-gradient(135deg, #8e44ad, #3498db);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
            background-color: #f9f9f9;
        }
        .button {
            display: inline-block;
            background: linear-gradient(135deg, #8e44ad, #3498db);
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .footer {
            text-align: center;
            font-size: 12px;
            color: #777;
            margin-top: 20px;
        }
    </style>


    <div class="container" fgid="290438">
        <div class="header" fgid="290444">
            <h1 fgid="290450">Nouveau template d'email</h1>
        </div>
        <div class="content" fgid="290457">
            <p fgid="290463">Bonjour,</p>
            
            <p fgid="290470">Text 1. </p><p fgid="290470">Text 2.</p>
            
            <p style="text-align: center;" fgid="290477">
                <a href="" class="button" fgid="290483">Text bouton</a>
            </p>
            
            <p fgid="290491">Si le bouton ne fonctionne pas, vous pouvez copier et coller le lien suivant dans votre navigateur :</p>
            <p fgid="290498"></p>
            
            <p fgid="290505">Ce lien expirera dans X heures.</p>
            
            <p fgid="290512">Text3.</p>
            
            <p fgid="290519">Cordialement,<br fgid="290526">L'équipe Dmqode.be.</p>
        </div>
        <div class="footer" fgid="290533">
            <p fgid="290539">Cet email a été envoyé automatiquement, merci de ne pas y répondre.</p>
        </div>
    </div>`,
                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 %}