{% set prediction = circonscription.getPrediction() %}

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

{% block entete %}
    {{ include('entete.html.twig') }}



{% endblock %}

{% block corps %}



<section class="suivi flex flex-row">
    <div role="progressbar" class="progression mdc-linear-progress" data-fait='{{suivi.getNombreFait()}}'>
        <!--<div class="mdc-linear-progress__buffering-dots"></div>-->
        <div class="mdc-linear-progress__buffer"></div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
            <span class="mdc-linear-progress__bar-inner"></span>
        </div>
    </div>
   
    
</section>

<section class="circonscription flex flex-row">
    <section class="circonscription__main flex flex-col">
        <section class="btn-action-prediction flex flex-row">
            {# <button class="hidden" id="soumettre">Élire</button> #}
            {% if circonscription.bsq_av %}
            <a href="{{ circonscription.bsq_av }}" class="btn mdc-button precedent" data-anim='quitter__precedent'>Précédente</a>
        
            {% endif %}
            <span class="flex-spacer"></span>
            {% if circonscription.bsq_ap %}
            
            <a href="{{ circonscription.bsq_ap }}" class="btn suivant mdc-button" data-anim='quitter__suivant'>Suivante</a>
            {% endif %}
        
        </section>
        <section class="candidats flex flex-col">
            <h2>{{circonscription.getCirconscription()}} ({{circonscription.getRegion().getNom()}})</h2>
            <section class="liste mdc-list-group">
                <h3 class="mdc-list-group__subheader">Sortant</h3>
                <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list mdc-list--non-interactive">
                    <li class="mdc-list-item ">
                    {% if circonscription.getDeputeActuel()%}
                        <span class="mdc-list-item__graphic"> 
                            {%  if circonscription.getDeputeActuel().getParti().getLogo() != '' %}
                                <img src="{{ asset("images/logo/"  ~ circonscription.getDeputeActuel().getParti().getLogo())}}">
                            {% endif %}</span>
                        <span class="mdc-list-item__text">
                                {{ circonscription.getDeputeActuel().getNom() }}, {{ circonscription.getDeputeActuel().getPrenom() }}
                            <span class="mdc-list-item__secondary-text">{{ circonscription.getDeputeActuel().getParti().getNom() }}</span>
                        </span>
                    {% else %}
                        <span class="mdc-list-item__text">
                            Aucun
                        <span class="mdc-list-item__secondary-text"> Nouvelle circonscription ou aucun débuté sortant </span>
                        </span>
                    {% endif %}
                    
                    </li> 
                </ul>
                <hr class="mdc-list-divider">
                <h3 class="mdc-list-group__subheader">Candidats (Faites un choix)</h3>
                <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list">
                    {% for candidat in candidats %}
                    <li class="mdc-ripple-surface mdc-list-item 
                    {% if prediction is not null  %}
                        {% if prediction.getCandidat() %}
                            {% if candidat.getId() ==  prediction.getCandidat().getId() %}
                                mdc-list-item--selected
                            {%  endif %}
                        {%  endif %}
                    {%  endif %}
                    " data-candidat="{{ candidat.getId() }}">
                            <span class="mdc-list-item__graphic"> 
                                {%  if candidat.getParti().getLogo() != '' %}
                                    <img src="{{ asset("images/logo/"  ~ candidat.getParti().getLogo())}}">
                                {% endif %}</span>
                            <span class="mdc-list-item__text">
                                    {{ candidat.getNom() }}, {{ candidat.getPrenom() }}
                                <span class="mdc-list-item__secondary-text">{{ candidat.getParti().getNom() }}</span>
                            </span>
                            <span class="flex-spacer"> 
                            </span>
                            <i class="vote material-icons">check_circle_outline</i>
                        </li>
                    {% endfor %}
                </ul>

            </section>

            
            <section class="btn-action-prediction flex flex-row">
                {# <button class="hidden" id="soumettre">Élire</button> #}
                {% if circonscription.bsq_av %}
                <a href="{{ circonscription.bsq_av }}" class="btn mdc-button precedent" data-anim='quitter__precedent'>Précédente</a>
            
                {% endif %}
                <span class="flex-spacer"></span>
                {% if circonscription.bsq_ap %}
                
                <a href="{{ circonscription.bsq_ap }}" class="btn suivant mdc-button" data-anim='quitter__suivant'>Suivante</a>
                {% endif %}
              
            </section>
        </section>
    </section>
    <section class="information__carte">
    {% if circonscription.getAnnee() == '2018'%}
        <img src="{{ asset('images/circ/2017/' ~ circonscription.getBsq() ~ '.png') }}">
    {% endif %}
    </section>
        
        
</section>

{% endblock %}
{% block javascripts %}
<script src="{{ asset("build/js/circonscription.js") }}"></script>
<script src="{{ asset("build/js/app.js") }}"></script>

{% endblock %}