{% extends '@kohinos/bundles/SonataAdminBundle/standard_layout.html.twig' %}

{% block title %}Modifier: {{ template.name }}{% endblock %}

{% block breadcrumb %}
    <li><a href="{{ path('sonata_admin_dashboard') }}"><i class="fa fa-home"></i></a></li>
    <li><a href="{{ path('admin_email_template_list') }}">Templates d'emails</a></li>
    <li class="active">Modifier</li>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .template-editor-container { display: flex; gap: 20px; }
    .editor-panel { flex: 2; }
    .variables-panel { flex: 1; max-width: 380px; }
    .variable-item {
        padding: 8px 12px;
        margin-bottom: 5px;
        margin-left: 0;
        background: #f5f5f5;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .variable-item:hover { background: #d0e8ff; }
    .variable-item code { font-weight: bold; color: #0066cc; font-size: 12px; }
    .variable-item small { display: block; color: #666; margin-top: 3px; font-size: 11px; }
    .variable-category { margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd; }
    .variable-category:first-child { margin-top: 0; padding-top: 0; border-top: none; }
    .variable-category h5 { margin-bottom: 10px; color: #333; font-size: 14px; font-weight: bold; }
    .variable-group {
        margin-bottom: 15px;
        padding: 10px;
        background: #f9f9f9;
        border-left: 3px solid #3c8dbc;
        border-radius: 3px;
    }
    .variable-group strong {
        display: block;
        margin-bottom: 8px;
        color: #3c8dbc;
        font-size: 13px;
    }
    .variable-group .variable-item {
        margin-left: 10px;
        background: #fff;
    }
    .variable-group .variable-item:hover {
        background: #d0e8ff;
    }
</style>
{% endblock %}

{% block sonata_admin_content %}
<section class="content-header">
    <div class="sticky-wrapper">
        <nav class="navbar navbar-default" role='navigation'>
            <div class="container-fluid">
                <div class="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="sonata-action-element" href="{{ path('admin_email_template_list') }}"><i class="fa fa-undo"></i> Retour à la liste
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fa fa-edit"></i> Modifier: {{ template.name }}</h3>
                    <div class="box-tools pull-right">
                        <a href="{{ path('admin_email_template_show', {id: template.id}) }}" class="btn btn-default btn-sm">
                            <i class="fa fa-arrow-left"></i> Retour
                        </a>
                    </div>
                </div>
                <div class="box-body">
                    <form method="post" id="template-form" data-preview-url="{{ path('admin_email_template_preview', {id: template.id}) }}">
                        <div class="template-editor-container">
                            <div class="editor-panel">
                                <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> <strong>Mode d'édition simplifié :</strong> Vous éditez uniquement le contenu du bloc <code>{{ '{%' }} block content {{ '%}' }}</code>. Le layout de l'email (header, footer) est géré automatiquement.
                                </div>
                                <div class="form-group">
                                    <label for="content">Contenu de l'email</label>
                                    <textarea name="content" id="content" class="form-control ckeditor">{{ template.contentBlock }}</textarea>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Sauvegarder</button>
                                    <button type="button" class="btn btn-info" id="preview-btn"><i class="fa fa-eye"></i> Aperçu</button>
                                    <a href="{{ path('admin_email_template_show', {id: template.id}) }}" class="btn btn-default">Annuler</a>
                                </div>
                                <div class="box box-default" id="preview-box" style="display: none;">
                                    <div class="box-header with-border">
                                        <h4 class="box-title"><i class="fa fa-eye"></i> Aperçu</h4>
                                        <div class="box-tools pull-right">
                                            <button type="button" class="btn btn-box-tool" onclick="document.getElementById('preview-box').style.display='none'"><i class="fa fa-times"></i></button>
                                        </div>
                                    </div>
                                    <div class="box-body" id="preview-content"></div>
                                </div>
                            </div>
                            <div class="variables-panel">
                                <div class="box box-info">
                                    <div class="box-header with-border">
                                        <h4 class="box-title"><i class="fa fa-code"></i> Variables disponibles</h4>
                                    </div>
                                    <div class="box-body" style="max-height: 700px; overflow-y: auto;">
                                        <p class="text-muted small">
                                            <i class="fa fa-lightbulb-o"></i> <strong>Astuce :</strong> L'aperçu utilise vos données réelles si vous êtes connecté.
                                        </p>

                                        <div class="variable-category">
                                            <h5><i class="fa fa-globe"></i> Variables globales</h5>
                                            {% for name, info in variables %}
                                                {% if info.properties is defined %}
                                                    <div class="variable-group">
                                                        <strong><code>{{ name }}</code></strong> <small class="text-muted">{{ info.description|default('') }}</small>
                                                        {% for propName, propDesc in info.properties %}
                                                        <div class="variable-item" data-var="{{ '{{' }} {{ name }}.{{ propName }} {{ '}}' }}">
                                                            <code>{{ '{{' }} {{ name }}.{{ propName }} {{ '}}' }}</code>
                                                            <small>{{ propDesc }}</small>
                                                        </div>
                                                        {% endfor %}
                                                    </div>
                                                {% else %}
                                                <div class="variable-item" data-var="{{ '{{' }} {{ name }} {{ '}}' }}">
                                                    <code>{{ '{{' }} {{ name }} {{ '}}' }}</code>
                                                    <small>{{ info.description|default('') }}</small>
                                                </div>
                                                {% endif %}
                                            {% endfor %}
                                        </div>

                                        <div class="variable-category">
                                            <h5><i class="fa fa-code"></i> Syntaxe Twig</h5>
                                            <div class="variable-item" data-var="{{ '{{' }} variable {{ '}}' }}">
                                                <code>{{ '{{' }} variable {{ '}}' }}</code>
                                                <small>Afficher une variable</small>
                                            </div>
                                            <div class="variable-item" data-var="{{ '{%' }} if condition {{ '%}' }}&#10;&#10;{{ '{%' }} endif {{ '%}' }}">
                                                <code>{{ '{%' }} if {{ '%}' }}</code>
                                                <small>Condition</small>
                                            </div>
                                            <div class="variable-item" data-var="{{ '{%' }} for item in items {{ '%}' }}&#10;&#10;{{ '{%' }} endfor {{ '%}' }}">
                                                <code>{{ '{%' }} for {{ '%}' }}</code>
                                                <small>Boucle</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('build/admin-email-template-editor.js') }}"></script>
{% endblock %}