{% extends 'domain/frontend/layouts/base.html.twig' %}

{% block title %}Récrutement{% endblock %}
{% block main_title %}Récrutement{% endblock %}

{% block body %}
    <!-- Page Title Section -->
    <section class="page-hero">
        <h1>Service Récrutement</h1>
        <p>Rejoignez l'équipe de SIFO ENERGIE</p>
    </section>

    <!-- Recruitment Section -->
    <section class="recruitment">
        <div class="recruitment-container">
            <h2 class="section-title">Offres d'Emploi</h2>
            <p class="section-subtitle">Chez SIFO ENERGIE, nous cherchons les meilleurs talents pour rejoindre notre
                équipe dynamique</p>

            {% if jobOffers is not empty %}
                <div class="no-jobs-message m-0 m-auto">
                    <svg class="no-jobs-icon" width="80" height="80" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor">
                        <path d="M20 7h-4V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM10 5h4v2h-4V5z"/>
                    </svg>
                    <h3>Aucune offre disponible actuellement</h3>
                    <p>Nous mettons à jour nos offres régulièrement. Revenez bientôt ou envoyez-nous votre CV en
                        candidature spontanée.</p>
                    <a href="mailto:recrutement@sifoenergie.com" class="spontaneous-btn">Candidature spontanée</a>
                </div>
            {% else %}
                <div class="job-listings">
                    {% for job in jobOffers %}
                        <div class="job-card">
                            <div class="job-header">
                                <h3>{{ job.title }}</h3>
                                <span class="job-type">CDI</span>
                            </div>
                            <div class="job-details">
                                {{ job.description|slice(0, 100) }}
                            </div>
                            <a href="{{ path('front.recrutement.detail', {"id" : job.id}) }}" class="job-apply-btn">Postuler</a>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="recruitment-info">
                <h3>Pourquoi nous rejoindre ?</h3>
                <div class="benefits-grid">
                    <div class="benefit-item">
                        <span class="benefit-icon">💰</span>
                        <p><strong>Salaire Compétitif</strong> adapté à votre expérience</p>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">🎓</span>
                        <p><strong>Formation Continue</strong> pour développer vos compétences</p>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">🏥</span>
                        <p><strong>Couverture Sociale</strong> complète et avantages</p>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-icon">👥</span>
                        <p><strong>Équipe Dynamique</strong> avec ambiance de travail positive</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .no-jobs-message {
            width: 100%;
            text-align: center;
            padding: 3rem 2rem;
            background-color: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }

        .no-jobs-message h3 {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .no-jobs-message p {
            font-size: 1rem;
            color: #666;
            margin: 0;
            line-height: 1.6;
        }
        .spontaneous-btn {
            display: inline-block;
            padding: 12px 32px;
            background: white;
            color: #667eea;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-top: 20px;
        }

        .spontaneous-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
    </style>
{% endblock %}