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

{% block title %}Dashboard{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-analytics.min.css">
{% endblock%}

{% block body %}
    {% include 'include/menu.html.twig' %}

    <!-- BEGIN: Content-->
    <div class="container-fluid height-75-per w-100">
        <div class="row h-100 w-100">
            <div class="h-100 w-100 p-2">
                <div class="container col-12 h-100 mt-20 mb-20" style="display: flex">
                    <div class="row width-70-per h-100 p-0 m-0">
                        <div class="container col-12 w-100" style="height:10%">
                            <div class="row h-100 w-100 d-flex align-items-center mr-10">
                                <div class="col-1">
                                    <img src="/img/icone_scenarios.png" style="height: 7vh; width: 4vw"/>
                                </div>
                                <div class="col-5" style="font-size: 2.5vh">
                                    <strong>Scenarios</strong>
                                </div>
                            </div>
                        </div>
                        <div class="col-1"></div>
                        <div class="col-10 w-100" style="height:90%">
                            <div class="card-content h-100 bg-transparent">
                                <div id="carousel-example-caption" data-ride="carousel" class="carousel slide h-100 w-100 bg-transparent" data-interval="false">
                                    <ol class="carousel-indicators nav nav-pills">
                                        {% for scenarioCategory in scenarioCategories  %}
                                            {% if scenarioCategory.id == 1 %}
                                                <li data-target="#carousel-example-caption" data-slide-to="{{ scenarioCategory.id - 1 }}" style="background: url({{ scenarioCategory.file }}) no-repeat; background-size: cover; height: 5vh; width: 5vw"><a style="height: 100%; margin-bottom: 0; margin-right: 0; background-color: transparent;" data-toggle="tab" class="nav-item nav-link active " href="#tab{{ scenarioCategory.id }}"></a></li>
                                            {% else %}
                                                <li data-target="#carousel-example-caption" data-slide-to="{{ scenarioCategory.id - 1 }}" style="background: url({{ scenarioCategory.file }}) no-repeat; background-size: cover; height: 5vh; width: 5vw"><a style="height: 100%; margin-bottom: 0; margin-right: 0; background-color: transparent;" data-toggle="tab" class="nav-item nav-link" href="#tab{{ scenarioCategory.id }}"></a></li>
                                            {% endif %}
                                        {% endfor %}
                                    </ol>
                                    <div class="carousel-inner w-100 h-100" role="listbox">
                                        {% for scenarioCategory in scenarioCategories  %}
                                            {% if scenarioCategory.id == 1 %}
                                                <div class="carousel-item active w-100 h-100">
                                                    <div class="card-img-overlay bg-transparent w-100 h- p-0 m-0">
                                                        <div class="h-100 w-100">
                                                            <div class="w-100 height-25-per text-left" style="font-size: 1.5em; color: #1f3066;">
                                                                <div class="font-size-large font-weight-bold">{{ scenarioCategory.name }}</div>
                                                                <div class="font-size-large">Etudiez les scénarios des différents niveaux afin de vous perfectionner et de vous préparer aux situations réelles. </div>
                                                            </div>
                                                            <div class="height-75-per" style="background: url({{ scenarioCategory.file }}) no-repeat; background-size: cover;">
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                            {% else %}
                                                <div class="carousel-item w-100 h-100">
                                                    <div class="card-img-overlay bg-transparent w-100 h- p-0 m-0">
                                                        <div class="h-100 w-100">
                                                            <div class="w-100 height-25-per text-left" style="font-size: 1.5em; color: #1f3066;">
                                                                <div class="font-size-large font-weight-bold">{{ scenarioCategory.name }}</div>
                                                            </div>
                                                            <div class="height-75-per" style="background: url({{ scenarioCategory.file }}) no-repeat; background-size: cover;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row width-30-per h-100 p-0 m-0">
                        <div class="tab-content">
                            {% for scenarioCategory in scenarioCategories  %}
                                {% if scenarioCategory.id == 1 %}
                                    <table id="tab{{ scenarioCategory.id }}" class="tab-pane active table table-dark mb-0">
                                            <thead>
                                            <tr>
                                                <th>Nom</th>
                                                <th>Date</th>
                                                <th>Voir</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for scenario in scenarioCategory.scenarios %}
                                                <tr>
                                                    <td class="text-bold-500">{{ scenario.name }}</td>
                                                    <td>{{ scenario.created | date('d-m-Y') }}</td>
                                                    <td><a target="_blank" href="{{ scenario.file }}"><i class="fas fa-download" style="background-color: #475f7b !important;"></i></a></td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                {% else %}
                                    <table id="tab{{ scenarioCategory.id }}" class="tab-pane table table-dark mb-0">
                                        <thead>
                                        <tr>
                                            <th>Nom</th>
                                            <th>Date</th>
                                            <th>Voir</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for scenario in scenarioCategory.managements %}
                                            <tr>
                                                <td class="text-bold-500">{{ scenario.title }}</td>
                                                <td>{{ scenario.created | date('d-m-Y') }}</td>
                                                <td><a target="_blank" href="{{ scenario.file }}"><i class="fas fa-download" style="background-color: #475f7b !important;"></i></a></td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}


{% endblock %}