{% extends 'admin/base.html' %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>{% if page %}Modifier la page{% else %}Ajouter une page{% endif %}</h1>
        <div>
            <a href="{{ url_for('admin.pages') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour à la liste
            </a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <form method="post" class="needs-validation" novalidate>
                {{ form.hidden_tag() }}
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.title.label(class="form-label") }}
                            {{ form.title(class="form-control") }}
                            {% if form.title.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.title.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ form.slug.label(class="form-label") }}
                            {{ form.slug(class="form-control") }}
                            <div class="form-text">
                                Le slug est utilisé dans l'URL, par exemple /page/<em>mon-slug</em>. Utilisez uniquement des minuscules, chiffres et tirets.
                            </div>
                            {% if form.slug.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.slug.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="form-group mb-3">
                    {{ form.description.label(class="form-label") }}
                    {{ form.description(class="form-control", rows=3) }}
                    {% if form.description.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.description.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="form-check">
                            {{ form.is_active(class="form-check-input") }}
                            {{ form.is_active.label(class="form-check-label") }}
                        </div>
                    </div>
                </div>
                
                <h5 class="mt-4">SEO</h5>
                <hr>
                
                <div class="form-group mb-3">
                    {{ form.meta_keywords.label(class="form-label") }}
                    {{ form.meta_keywords(class="form-control") }}
                    <div class="form-text">Mots-clés séparés par des virgules, utilisés pour le référencement.</div>
                    {% if form.meta_keywords.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.meta_keywords.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                
                <div class="form-group mb-3">
                    {{ form.meta_description.label(class="form-label") }}
                    {{ form.meta_description(class="form-control", rows=2) }}
                    <div class="form-text">Description courte utilisée dans les résultats de recherche.</div>
                    {% if form.meta_description.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.meta_description.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    {% if page %}
    <div class="mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>Sections de la page</h3>
            <div>
                <a href="{{ url_for('admin.add_section') }}?page_id={{ page.id }}" class="btn btn-primary">
                    <i class="fas fa-plus-circle"></i> Ajouter une section
                </a>
            </div>
        </div>
        
        {% if page.sections %}
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Ordre</th>
                                <th>Titre</th>
                                <th>Type</th>
                                <th>Statut</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for section in page.sections|sort(attribute='order') %}
                            <tr>
                                <td>{{ section.order }}</td>
                                <td>{{ section.title }}</td>
                                <td>{{ section.section_type }}</td>
                                <td>
                                    {% if section.is_active %}
                                    <span class="badge bg-success">Actif</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Inactif</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ url_for('admin.edit_section', id=section.id) }}" class="btn btn-info" title="Modifier">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-danger delete-section-btn" data-item-id="{{ section.id }}" title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> Aucune section n'a été créée pour cette page. Ajoutez des sections pour enrichir le contenu.
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>

<!-- Delete Section Modal -->
<div class="modal fade" id="deleteSectionModal" tabindex="-1" aria-labelledby="deleteSectionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteSectionModalLabel">Confirmation de suppression</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Êtes-vous sûr de vouloir supprimer cette section ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form method="post" action="">
                    <button type="submit" class="btn btn-danger">Supprimer</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // Auto-generate slug from title
        $('#title').on('keyup', function() {
            if (!$('#slug').data('manually-changed')) {
                var slug = $(this).val()
                    .toLowerCase()
                    .replace(/[^\w\s-]/g, '')  // Remove special chars
                    .replace(/\s+/g, '-')      // Replace spaces with hyphens
                    .replace(/--+/g, '-');     // Replace multiple hyphens with single hyphen
                $('#slug').val(slug);
            }
        });
        
        $('#slug').on('keyup', function() {
            $(this).data('manually-changed', true);
        });
        
        // Delete section confirmation
        $('.delete-section-btn').on('click', function() {
            var id = $(this).data('item-id');
            var deleteForm = $('#deleteSectionModal').find('form');
            deleteForm.attr('action', "{{ url_for('admin.delete_section', id=0) }}".replace('0', id));
            $('#deleteSectionModal').modal('show');
        });
    });
</script>
{% endblock %}