<%- include ('partials/header') %>
    <%- include ('partials/title-header') %>
        <article class="results">
            <section class="recap__section">
                <aside class="recap__section__address">
                    <h3>Votre adresse : </h3>
                    <p>
                        <%= address.firstline %>
                    </p>
                    <p>
                        <%= address.secondline %>
                    </p>
                </aside>
                <aside class="recap__section__circo">
                    <h3>Votre circonscription : </h3>
                    <% let numero=parseInt(numCirco, 10); let order; numero===1 ? order="ère" : order="ème" %>

                        <p>
                            <%= myMp.numCirc %>
                                <%= order %> circonscription du département
                        </p>
                        <p>
                            <%= myMp.dpt %>
                        </p>
                </aside>
                <a href="/">Relancer une recherche</a>
            </section>
            <div class="results__div">
                <div class="results__mp-and-candidates">
                    <section class="results-subsection depute-id-section">
                        <h2>Qui est <% if (myMp.gender==="H" ) { %> le député <% } else {%> la députée <% } %> de votre
                                        circonscription ?</h2>
                        <div class="depute-id-container">
                            <img class="depute-id-img" src="<%= myMp.url_img %> "
                                alt="Photo de <%= myMp.lastname %> <%= myMp.firstname %> ">
                            <div class="depute-id-details">
                                <% let circleColor; myMp.mandat==='Mandat en cours' ? circleColor="#8cd155" : circleColor="#e30022" %>
                                    <table class="depute-id-details__table">
                                        <tr class="depute-id-details__row">
                                            <td class="depute-id-details__tag col-1 ">
                                                Nom :
                                            </td>
                                            <td class="depute-id-details__name col-2">
                                                <%= myMp.lastname %>
                                                    <%= myMp.firstname %>
                                            </td>
                                        </tr>
                                        <tr class="depute-id-details__row">
                                            <td class="depute-id-details__tag col-1 ">
                                                Parti :
                                            </td>
                                            <td class="depute-id-details__party col-2">
                                                <%= myMp.party %>
                                            </td>
                                        </tr>
                                        <tr class="depute-id-details__row">
                                            <td class="depute-id-details__circle col-1"
                                                style="color:<%= circleColor %>">
                                                &#9679;
                                            </td>
                                            <td class="depute-id-details__mandate col-2 ">
                                                <%= myMp.mandat %>
                                            </td>
                                        </tr>
                                        <tfoot>
                                            <tr>
                                                <th colspan="2"><a href="<%= myMp.url_nosdeputes %>">Plus d'informations
                                                        sur
                                                        le site Nos Députés</a></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                            </div>
                        </div>
                    </section>
                    <section class="results-subsection candidats-section">
                        <h2>Qui sont les candidates et candidats ?</h2>
                        <%- include('partials/candidates.ejs') %>
                    </section>
                </div>
                <section class="results-subsection presidential-results-section">
                    <h2>Comment vote votre circonscription ?</h2>
                    <h3>Résultats de l'élection présidentielle 2022</h3>
                    <table class="firstround-table">
                        <thead>
                            <tr class="result-table-row-head">
                                <th colspan="3">Premier tour de la présidentielle</th>
                            </tr>
                        </thead>
                        <tr class="result-table-row">
                            <td class="result-table-column result-table-column-1">
                                Taux de participation
                            </td>
                            <td class="result-table-column result-table-column-2">
                                <div class="result-bar-bg">
                                    <% let firstPercentage; presidentialResults.firstRoundResults.votants[1][1] < 1.2 ? firstPercentage=1.2 : firstPercentage=presidentialResults.firstRoundResults.votants[1][1] %>
                                        <div class="result-bar-percentage"
                                            style="--percentage: <%= firstPercentage %>%; --candidate-color: #231C4F">
                                            &nbsp;
                                        </div>
                                </div>
                            </td>
                            <td class="result-table-column result-table-column-3 ">
                                    <%= firstPercentage %> %
                            </td>
                        </tr>
                        <tr class="result-table-row blank-row">
                            <td colspan="3">&nbsp;</td>
                        </tr>
                        <% let exprimesFirst=presidentialResults.firstRoundResults.exprimes; for (const candidate of exprimesFirst ) { %>
                            <tr class="result-table-row">
                                <td class="result-table-column result-table-column-1">
                                    <%= candidate[0] %>
                                </td>
                                <td class="result-table-column result-table-column-2">
                                    <div class="result-bar-bg">
                                        <% let percentage; candidate[1] < 1.2 ? percentage=1.2 : percentage=candidate[1] %>
                                            <div class="result-bar-percentage"
                                                style="--percentage: <%= percentage %>%; --candidate-color:<%= candidate[2] %>">
                                                &nbsp;
                                            </div>
                                    </div>
                                </td>
                                <td class="result-table-column result-table-column-3">
                                    <%= candidate[1] %> %
                                </td>
                            </tr>
                            <% } %>
                    </table>
                    <table class="secondround-table">
                        <thead>
                            <tr class="result-table-row-head">
                                <th colspan="3">Second tour de la présidentielle</th>
                            </tr>
                        </thead>
                        <tr class="result-table-row">
                            <td class="result-table-column result-table-column-1">
                                Taux de participation
                            </td>
                            
                            <td class="result-table-column result-table-column-2">
                                <div class="result-bar-bg">
                                    <% let secondPercentage; presidentialResults.secondRoundResults.votants[1][1] < 1.2 ? secondPercentage=1.2 : secondPercentage=presidentialResults.secondRoundResults.votants[1][1] %>
                                        <div class="result-bar-percentage"
                                            style="--percentage: <%= secondPercentage %>%; --candidate-color: #231C4F">
                                            &nbsp;
                                        </div>
                                </div>
                            </td>
                            <td class="result-table-column result-table-column-3 ">
                                    <%= secondPercentage %> %
                            </td>
                        </tr>
                        <tr class="result-table-row blank-row">
                            <td colspan="3">&nbsp;</td>
                        </tr>
                        <% let exprimesSecond=presidentialResults.secondRoundResults.exprimes; for (const candidate of exprimesSecond ) { %>
                            <tr class="result-table-row">
                                <td class="result-table-column result-table-column-1 ">
                                    <%= candidate[0] %>
                                </td>
                                <td class="result-table-column result-table-column-2 ">
                                    <div class="result-bar-bg">
                                        <div class="result-bar-percentage"
                                            style="--percentage: <%= candidate[1] %>%; --candidate-color:<%= candidate[2] %>">
                                            &nbsp;
                                        </div>
                                    </div>
                                </td>
                                <td class="result-table-column result-table-column-3 ">
                                    <%= candidate[1] %> %
                                </td>
                            </tr>
                            <% } %>
                    </table>
                </section>

            </div>

        </article>

        <%- include ('partials/footer') %>