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

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

{% block content %}

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

{#
    <pre>
{{ accompanyingCourse.id }}
{{ accompanyingCourse.openingDate|format_date('short') }}
{{ accompanyingCourse.closingDate|format_date('short') }}
{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
{{ accompanyingCourse.remark|raw }}
{{ accompanyingCourse.user }}
usagers:
{% for p in accompanyingCourse.participations %}
    {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
{% endfor %}
    </pre>
    {{ dump() }}
    {% verbatim %}{% endverbatim %}
#}

    <div id="app" course-id="{{ accompanyingCourse.id }}"></div>
    
<template id="accompanying" type="text/x-template">
   <div class="vue-component">
      <persons_associated></persons_associated>
   </div>
</template>
    
<template id="vue-usagers" type="text/x-template">
    <div class="vue-component">
        <h3>Usagers concernés</h3>
        <dl>
            <dt>id</dt>
                <dd>${ persons_associated.id }</dd>
            <dt>opening_date</dt>
                <dd>${ persons_associated.opening_date }</dd>
            <dt>closing_date</dt>
                <dd>${ persons_associated.closing_date }</dd>
            <dt>remarkzzzzz</dt>
                <dd>${ persons_associated.remark }</dd>
            <dt>closing_motive</dt>
                <dd>${ persons_associated.closing_motive }</dd>
        </dl>
        <label>${counter} usagers concernés</label>
        <table class="rounded">
            <thead>
                <tr>
                    <th class="chill-orange">firstname</th>
                    <th class="chill-orange">lastname</th>
                    <th class="chill-orange">startdate</th>
                    <th class="chill-orange">enddate</th>
                    <th class="chill-orange">actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in persons_associated.persons">
                    <td>${ person.firstname }</td>
                    <td>${ person.lastname }</td>
                    <td>${ person.startdate }</td>
                    <td>${ person.enddate }</td>
                    <td>
                      <ul class="record_actions">
                        <li><a class="sc-button bt-show"></a></li>
                        <li><a class="sc-button bt-update"></a></li>
                        <li><a class="sc-button bt-delete"></a></li>
                      </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <ul class="record_actions">
            <li>
                <button class="sc-button bt-create" @click="addPerson">Add Person</button>
            </li>
        </ul>
    </div>
        
</template>
    {{ encore_entry_script_tags('accompanying_course') }}

{% endblock %}