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

{% block title %}Notre équipe{% endblock %}
{% block main_title %}Notre équipe{% endblock %}
{% block sub_title %}Notre équipe{% endblock %}

{% block body %}
    <section class="organization-chart mt-4 mb-4">
        <div class="about-content mb-4 row">
            <div class="section-title">
                <span class="wow fadeInUp">Le personnel</span>
            </div>
            <p class="mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                Nous mettons l’accent sur la ressource humaine, la qualification, la rigueur, la dextérité et
                l’expérience de notre personnel comme l’acteur principal de notre société. Nous avons à ce jour 46
                emplois directs et 28 emplois indirects.
                <br>br
                Avec des dirigeants très expérimentés dans le domaine, en la qualité du Directeur général avec près de
                20 ans d’expérience en trading dans le domaine pétrolier et son adjoint avec plus de 14 ans dans le
                domaine des finances et gestion du patrimoine et 2 ans à la tête d’une compagnie de courtage et
                financement de projet, SIFO énergie qui existe depuis décembre 2016 s’est hissée dans le lot des
                meilleures performances des sociétés de distribution en 2018.
            </p>
        </div>
        <div class="chart-container">
            <!-- Direction Générale -->
            <div class="box dg">
                <h3>DG</h3>
                <p>Direction Générale</p>
            </div>

            <!-- Sous-sections -->
            <div class="sub-sections">
                <!-- Assistance de Direction -->
                <div class="box ad">
                    <h3>AD</h3>
                    <p>Assistance de Direction</p>
                </div>

                <!-- Direction Générale Adjointe -->
                <div class="box dga">
                    <h3>DGA</h3>
                    <p>Direction Générale Adjointe</p>
                </div>
            </div>

            <!-- Départements -->
            <div class="departments">
                <div class="box dmg">
                    <h3>DMG</h3>
                    <p>Département Moyens Généraux</p>
                </div>
                <div class="box df">
                    <h3>DF</h3>
                    <p>Département Finance</p>
                </div>
                <div class="box dvr">
                    <h3>DVR</h3>
                    <p>Département Vente & Réseaux</p>
                </div>
                <div class="box de">
                    <h3>DE</h3>
                    <p>Département Exploitation</p>
                </div>
                <div class="box dcd">
                    <h3>DCD</h3>
                    <p>Département Commercial</p>
                </div>
                <div class="box drh">
                    <h3>DRH</h3>
                    <p>Département des Ressources Humaines</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block style %}
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        .organization-chart {
            text-align: center;
            padding: 50px 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            max-width: 1200px;
            margin: auto;
        }

        .organization-chart h2 {
            font-size: 2.5em;
            color: #333;
            margin-bottom: 20px;
        }

        .chart-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .box {
            background-color: grey;
            color: #ffffff;
            padding: 15px 20px;
            border-radius: 8px;
            text-align: center;
            margin: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .box:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        .box h3 {
            margin: 0;
            font-size: 1.2em;
            font-weight: bold;
        }

        .box p {
            margin: 5px 0 0;
            font-size: 1em;
        }

        .sub-sections {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .departments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            max-width: 1000px;
            margin: 30px auto;
        }
    </style>
{% endblock %}