{% extends 'base.html.twig' %}
{% block title %}Nouveau club{% endblock %}
{% block body_class %}admin-layout{% endblock %}

{% block header_banner %}
<div class="page-banner page-banner-admin">
    <div class="container">
        <h1 class="page-title">Nouveau club</h1>
        <p class="page-sub">Créer un compte club</p>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="admin-layout-inner">
    {{ include('admin/_sidebar.html.twig') }}
<style>
.admin-content { padding: 8px 0 40px; }

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16,24,40,.06);
    overflow: hidden;
}
.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--navy-tint);
}
.card-title {
    margin: 0;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--navy);
}

.form-admin { padding: 24px; }
.form-admin > div { margin-bottom: 18px; }
.form-admin .form-label,
.form-admin label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}
.form-admin .form-control,
.form-admin input[type="text"],
.form-admin input[type="email"],
.form-admin input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
    color: var(--gray-900);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-admin input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px var(--navy-tint);
}
.form-admin .form-text,
.form-admin .form-help {
    font-size: .78rem;
    color: var(--gray-600);
    margin-top: 4px;
}
.form-admin .invalid-feedback,
.form-admin .form-error {
    display: block;
    font-size: .8rem;
    color: var(--red);
    margin-top: 4px;
    font-weight: 600;
}

.form-actions { display: flex; gap: 10px; }
.mt-4 { margin-top: 24px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--border); }
.btn-outline:hover { background: var(--navy-tint); }
</style>
   <div class="admin-content">
    <div class="card" style="max-width:640px">
        <div class="card-header">
            <h2 class="card-title">Informations du club</h2>
        </div>
        {{ form_start(form, {attr: {class: 'form-admin'}}) }}
            {{ form_errors(form) }}
            {{ form_row(form.nomClub) }}
            {{ form_row(form.email) }}
            {{ form_row(form.plainPassword) }}

            <div class="form-actions mt-4">
                <button type="submit" class="btn btn-primary">Créer le club</button>
                <a href="{{ path('admin_clubs') }}" class="btn btn-outline">Annuler</a>
            </div>
        {{ form_end(form) }}
    </div>
</div>
</div>
{% endblock %}