{% extends 'ChillPersonBundle:AccompanyingCourse:layout.html.twig' %}

{% block title %}
    {{ 'Accompanying Course Details'|trans }}
{% endblock %}

{% block content %}

    <h1>{{ block('title') }}</h1>

    <p>
        A CONFIRMER<br>
        Cette page serait en réalité l'historique des mouvements dans la section parcours,
        comme dans le contexte personne, à la page timeline.<br>
        Il faudrait peut-être modifier son adresse comme ceci: `/fr/parcours/{id}/timeline`
    </p>

    {# start test flex-table 
    
    <div class="flex-table">
        {% for p in accompanyingCourse.participations %}
        <div class="item-bloc">
            <div class="item-row">
                <div class="item-col">
                    <h3>
                        <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
                            {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
                        </a>
                    </h3>
                    <p>
                        <i class="fa fa-fw fa-venus" title="Femme"></i>
                        {{ 'Née le ' ~ p.person.birthdate|format_date('short') }}
                    </p>
                </div>
                <div class="item-col">
                    <ul class="list-content fa-ul">
                        <li><i class="fa fa-li fa-calendar"></i>
                            {{ p.startdate|format_date('short') }} → {{ p.enddate|format_date('short') }}
                        </li>
                        <li><i class="fa fa-li fa-mobile"></i>
                            +32 488 660 685
                        </li>
                        <li><i class="fa fa-li fa-envelope-o"></i>
                            robert@brisefeuille.fake.co
                        </li>
                        <li><i class="fa fa-li fa-map-marker"></i>
                            59, avenue Fernandez 79, boulevard Laurence Levy 1210 Saint-josse-ten-noode Belgique
                        </li>
                    </ul>
                    <ul class="record_actions">
                        <li><button type="button" class="sc-button bt-show"></button></li>
                        <li><button type="button" class="sc-button bt-edit"></button></li>
                    </ul>
                </div>
                
            </div>
            <div class="item-row">
                Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. 
            </div>
            <div class="item-row">
                Rhoncus est pellentesque elit eu ultrices vitae auctor. 
            </div>
            <div class="item-row">
                Facilisis gravida neque convallis a cras semper auctor neque.  
            </div>
        </div>
        {% endfor %}
    </div>
    #}
    {# end test flex-table #}

    {#  ==> insert accompanyingCourse vue component  #}
    <div id="accompanying-course"></div> 
{% endblock %}