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

{% block title %}Créer une communauté - Na+{% endblock %}

{% block body %}
<main id="contenu" style="padding: 2rem; box-sizing: border-box; text-align: left !important;">

    <div style="margin-bottom: 1rem;">
        <a href="{{ path('app_community_index', {'_locale': app.request.locale}) }}" style="font-size: 0.85rem; color: #aaa;">← Retour aux communautés</a>
    </div>

    {% for msg in app.flashes('error') %}
        <div style="background: #f8d7da; color: #721c24; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;">{{ msg }}</div>
    {% endfor %}

    <div class="card" style="padding: 1.5rem; max-width: 600px; margin: 0 auto;">
        <h1 style="margin: 0 0 1.25rem 0; font-size: 1.2rem; color: var(--royal, #1a2e5a); border-bottom: 2px solid var(--royal, #1a2e5a); padding-bottom: 0.5rem;">
            Créer une communauté
        </h1>

        <form method="post" enctype="multipart/form-data"
              action="{{ path('app_community_create', {'_locale': app.request.locale}) }}">

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-size: 0.82rem; font-weight: 700; color: var(--royal, #1a2e5a); margin-bottom: 0.3rem;">
                    Nom <span style="color: #e74c3c;">*</span>
                </label>
                <input type="text" name="name" required maxlength="100"
                       placeholder="Ex : Passionnés de lecture"
                       style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; box-sizing: border-box;">
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-size: 0.82rem; font-weight: 700; color: var(--royal, #1a2e5a); margin-bottom: 0.3rem;">
                    Description <span style="color: #aaa; font-weight: normal;">(optionnel)</span>
                </label>
                <textarea name="description" rows="4" maxlength="500"
                          placeholder="Décris l'objectif de ta communauté..."
                          style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; box-sizing: border-box; font-family: inherit; resize: vertical;"></textarea>
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-size: 0.82rem; font-weight: 700; color: var(--royal, #1a2e5a); margin-bottom: 0.3rem;">
                    Avatar <span style="color: #aaa; font-weight: normal;">(optionnel, JPG/PNG max 2Mo)</span>
                </label>
                <input type="file" name="avatar" accept="image/jpeg,image/png,image/gif,image/webp">
            </div>

            <div style="display: flex; gap: 0.75rem;">
                <button type="submit" class="btn btn-primary">Créer la communauté</button>
                <a href="{{ path('app_community_index', {'_locale': app.request.locale}) }}" class="btn btn-secondary">Annuler</a>
            </div>

        </form>
    </div>

</main>
{% endblock %}