{# templates/admin/poste/new.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Nouveau Poste - LUXIM GPIM{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    {# En-tête  #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        
       <h3 class="page-header page-header-top mb-1">Créer un nouveau poste</h3>

        <a href="{{ path('app_admin_poste_index') }}" class="btn btn-outline-secondary btn-sm shadow-sm px-3">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-7 col-xl-5">
            {# Carte du formulaire #}
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="text-primary p-2 rounded me-3" style="background-color: rgba(45, 90, 39, 0.1);">
                            <i class="fas fa-plus-circle fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-0 fw-bold text-dark">Détails du Poste</h5>
                            <p class="text-muted mb-0 small">Définissez l'intitulé et le niveau hiérarchique.</p>
                        </div>
                    </div>
                </div>
                
                <div class="card-body p-4 p-md-5">
                    {# Inclusion du formulaire stylisé précédemment #}
                    {{ include('admin/poste/_form.html.twig') }}
                </div>
                
                <div class="card-footer bg-light border-top-0 py-3 text-center">
                    <small class="text-muted">
                        <i class="fas fa-shield-alt me-1 opacity-50"></i> 
                        Ce poste sera immédiatement disponible pour les collaborateurs.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Animation légère à l'entrée de la page */
    .card {
        animation: fadeInUp 0.4s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
{% endblock %}