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

{% block title %}Créer un nouveau site{% endblock %}

{% block breadcrumb %}Mes sites <i class="fas fa-chevron-right"></i> Créer un site{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    {# En-tête #}
    <div class="row mb-4" data-aos="fade-down">
        <div class="col-12">
            <h1 class="h3 mb-2">
                <i class="fas fa-plus-circle me-2" style="color: var(--colorTheme);"></i>
                Créer un nouveau site
            </h1>
            <p class="text-muted">
                Plan sélectionné : <strong>{{ plan.name }}</strong>
                {% if plan.priceMonthly > 0 %}
                    ({{ plan.priceMonthly }}€/mois - 30 jours d'essai gratuit)
                {% else %}
                    (Gratuit)
                {% endif %}
                <a href="{{ path('admin_site_create') }}" class="ms-2 small"><i class="fas fa-edit"></i> Modifier</a>
            </p>
        </div>
    </div>

    {# Info box nouvel abonnement #}
    <div class="row justify-content-center mb-4">
        <div class="col-lg-8">
            <div class="alert alert-info d-flex align-items-center" style="background: rgba(102, 126, 234, 0.1); border: none;">
                <i class="fas fa-info-circle me-3 fs-4" style="color: #667eea;"></i>
                <div>
                    <strong>Nouvel abonnement</strong><br>
                    <small>Un nouvel abonnement {{ plan.name }} sera créé pour ce site, facturé séparément de vos autres sites.</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            {# Carte de formulaire #}
            <div class="card shadow-sm border-0" data-aos="fade-up">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <h5 class="mb-0 text-white">
                        <i class="fas fa-globe me-2"></i>
                        Informations du site
                    </h5>
                </div>
                <div class="card-body p-4">
                    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

                    {# Nom du site #}
                    <div class="mb-4">
                        {{ form_label(form.name, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                        {{ form_widget(form.name) }}
                        <small class="form-text text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Le nom de votre site tel qu'il apparaîtra dans l'administration
                        </small>
                        {{ form_errors(form.name) }}
                    </div>

                    {# Secteur d'activité #}
                    <div class="mb-4">
                        {{ form_label(form.industry, null, {'label_attr': {'class': 'form-label fw-bold'}}) }}
                        {{ form_widget(form.industry) }}
                        <small class="form-text text-muted">
                            <i class="fas fa-briefcase me-1"></i>
                            Optionnel : nous aide à personnaliser l'expérience
                        </small>
                        {{ form_errors(form.industry) }}
                    </div>

                    {# Info box #}
                    <div class="alert alert-info mb-4">
                        <h6 class="alert-heading">
                            <i class="fas fa-lightbulb me-2"></i>
                            Ce qui sera créé automatiquement :
                        </h6>
                        <ul class="mb-0 small">
                            <li><i class="fas fa-check text-success me-1"></i> Une page d'accueil</li>
                            <li><i class="fas fa-check text-success me-1"></i> Une page de contact</li>
                            <li><i class="fas fa-check text-success me-1"></i> Abonnement {{ plan.name }} activé</li>
                        </ul>
                    </div>

                    {# Hidden field pour passer le plan au POST #}
                    <input type="hidden" name="plan" value="{{ plan.code }}" />

                    {# Boutons d'action #}
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ path('choose-site') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            Annuler
                        </a>
                        <button type="submit" class="btn btn-primary" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                            <i class="fas fa-check me-2"></i>
                            Créer le site
                        </button>
                    </div>

                    {{ form_end(form) }}
                </div>
            </div>

            {# Conseils #}
            <div class="card shadow-sm border-0 mt-4" data-aos="fade-up" data-aos-delay="100">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-question-circle me-2 text-primary"></i>
                        Conseils pour démarrer
                    </h6>
                    <ul class="list-unstyled small mb-0">
                        <li class="mb-2">
                            <i class="fas fa-arrow-right text-muted me-2"></i>
                            Choisissez un nom explicite qui représente votre activité
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-arrow-right text-muted me-2"></i>
                            Vous pourrez personnaliser tous les aspects après la création
                        </li>
                        <li class="mb-0">
                            <i class="fas fa-arrow-right text-muted me-2"></i>
                            Un sous-domaine Izibrick sera automatiquement généré (ex: mon-site.izibrick.fr)
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}