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

{% block title %}Enquête{% endblock %}

{% set state = investigation. getState() %}

{% if state != null %}
    {% set step1 = "" %}
    {% set step2 = "" %}
    {% set step3 = "" %}
    {% set step4 = "" %}
    {% set active1 = "" %}
    {% set active2 = "" %}
    {% set active3 = "" %}
    {% set active4 = "" %}
    {% set width = "0%" %}

    {% if state.getStep() == 1 %}
        {% set step1 = "completed" %}
        {% set active1 = "active" %}
        {% set width = "10%" %}
    {% elseif state.getStep() == 2 %}
        {% set step1 = "completed" %}
        {% set step2 = "completed" %}
        {% set active2 = "active" %}
        {% set width = "50%" %}
    {% elseif state.getStep() == 3 %}
        {% set step1 = "completed" %}
        {% set step2 = "completed" %}
        {% set step3 = "completed" %}
        {% set active3 = "active" %}
        {% set width = "75%" %}
    {% elseif state.getStep() == 4 %}
        {% set step1 = "completed" %}
        {% set step2 = "completed" %}
        {% set step3 = "completed" %}
        {% set step4 = "completed" %}
        {% set active4 = "active" %}
        {% set width = "100%" %}
    {% endif %} 
{% endif %} 

{% block content %}
    <!-- az-header -->
    <div class="az-content">
        <div class="container">
            <div class="az-content-body d-flex flex-column">

                <div class="az-content-breadcrumb">
                    <span>Enquête</span>
                    <span>Affichage</span>
                </div>
                <h2 class="az-content-title">Enquête</h2>

                <div class="az-content-label mg-b-5"></div>
                <p class="mg-b-20"></p>


                <div class="card bd-0">
                    <div class="card-header tx-medium bd-0">
                        🇬🇧 English (UK) : {{ investigation.getNameEn() }}
                    </div><!-- card-header -->
                    <div class="card-body bd bd-t-0">
                        <p class="mg-b-0">{{ investigation.getSourceEn() }}</p>
                    </div><!-- card-body -->
                </div>

                <div class="card bd-0">
                    <div class="card-header tx-medium bd-0">
                        🇫🇷 Français : {{ investigation.getNameFr() }}
                    </div><!-- card-header -->
                    <div class="card-body bd bd-t-0">
                        <p class="mg-b-0">{{ investigation.getSourceFr() }}</p>
                    </div><!-- card-body -->
                </div>

                <div class="card bd-0">
                    <div class="card-header tx-medium bd-0">
                        العربية  🇸🇦  :  {{ investigation.getNameAr() }} 
                    </div><!-- card-header -->
                    <div class="card-body bd bd-t-0">
                        <p class="mg-b-0">{{ investigation.getSourceAr() }}</p>
                    </div><!-- card-body -->
                </div>


                {% for question in investigation.getQuestions() %}
                    <div class="card border-left border-primary">
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <h5 class="card-title mb-2 question-number">Question N: {{ loop.index }}</h5>
                                </div>
                                <div class="col-md-3 offset-1">
                                    Amount: {{ question.getAmount() }}
                                </div>
                                <div class="col-md-2 offset-1">
                                    Max participant: {{ question.getMaxParticipant() }}
                                </div>
                            </div>
                            <p><strong>Title:</strong> {{ question.getTitle() }}<p>
                            <p><strong>🇬🇧 Name:</strong> {{ question.getNameEn() }}<p>
                            <p><strong>🇫🇷 Nom:</strong> {{ question.getNameFr() }}<p>
                            <p><strong>🇸🇦 العربية:</strong> {{ question.getNameAr() }}<p>
                        </div>
                    </div>
                {% endfor %}



            </div>
        </div>
    </div>
{% endblock %}