{% set currentPath =
    path(
    app.request.attributes.get('_route'),
    app.request.attributes.get('_route_params')
    ) %}

{% set today = 'now'|date('m/d/Y') %}
    {% set todo = {
        '1': {
            title: 'First todo',
            priority: 'LOW',
            creation_date: 'now'|date('m/d/Y'),
            content: 'finir ce todo',
            author: 'hoho',
            end_date: ''
        },
        '2': {
            title: 'Finir db',
            priority: 'HIGH',
            creation_date: 'now'|date('m/d/Y'),
            content: 'finir réécriture des tables de la db',
            author: 'vcapatina',
            end_date: '8/06/2020',
        },
        '3': {
            title: 'Finir la page index des dossiers',
            priority: 'MEDIUM',
            creation_date: 'now'|date('m/d/Y'),
            content: '',
            author: 'amoriceau',
            end_date: '7/06/2020'},

    } %}

{% set notif = todo|length %}
    <div class="to-do_container">
        <div class="to-do_trigger">
            {% if notif is defined and notif > 0 %}
                <span class="to-do_trigger-notification">{{ notif }}</span>
            {% endif %}
            <i class="far fa-bars"></i>
        </div>
        <div class="to-do_body">
            <div class="to-do_body_title">
                <span>À faire :</span>
            </div>
            <div class="to-do_content">
                <ul class="to-do_content_list">
                    {% for item in todo %}
                        <li class="to-do_content_list_item">
                            <div class="to-do_content_list_item_header">
                                <div>
                  <span class="to-do_content_list_item_header-title">
                    {{ item.title }}
                  </span>
                                    {% if app.user.username == item.author %}
                                        <i class="fal fa-trash-alt suppress"></i>
                                    {% endif %}
                                </div>
                                {% if item.priority == 'HIGH' %}
                                    <i class="fal fa-tachometer-fastest high"></i>
                                {% elseif item.priority == 'MEDIUM' %}
                                    <i class="fal fa-tachometer-average med"></i>
                                {% elseif item.priority == 'LOW' %}
                                    <i class="fal fa-tachometer-slowest low"></i>
                                {% endif %}
                            </div>
                            <div class="to-do_content_list_item_date">
                                <span>Crée le:&nbsp{{ item.creation_date }}.</span>
                                {% if item.end_date != null or item.end_date != '' %}
                                    <span {% if item.end_date == today %} class="deadline" {% endif %}>À finir avant le :&nbsp{{ item.end_date }}.</span>
                                {% endif %}
                            </div>
                            <div class="to-do_content_list_item_body">
                                {{ item.content }}
                            </div>
                            <div class="to-do_content_list_item_foot">
                                <span>Par &nbsp{{ item.author }}</span>
                                <a href="#" class="todo_check">
                                    <i class="fal fa-check-circle"></i>
                                </a>
                            </div>
                        </li>
                        <div class="suppress_popup">
                            <span>Voulez vous vraiment supprimer cette tâche ?</span>
                        </div>
                        <hr/>
                    {% endfor %}
                </ul>
            </div>
            <div class="to-do_body_add">
                <div class="to-do_body_add_title">
                    <span>Ajouter une tâche</span><i class="fal fa-plus-circle cross"></i>
                </div>
                <div class="to-do_body_add_input">
                    <form method='post'>
                        <label for="todo_title">Titre:<input type="text"></input></label>
                        <label for="todo_priority">Priorité</label>
                            <select name="pets" name="todo_priority" required>
                                <option value="LOW">Basse</option>
                                <option value="MEDIUM">Moyenne</option>
                                <option value="HIGH">Urgente</option>
                            </select>
                        <label for="todo_content">Note</label><textarea type="text" rows="5" spellcheck name="todo_content"></textarea>
                        <label for="todo_deadline">Date limite</label><input type="date" name="todo_deadline"></input>
                        <button type="submit" class="btn btn-outline-warning btn-lg"> Créer une nouvelle tâche. <i class="fal fa-plus-circle cross"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>

    let todo_trigger = document.getElementsByClassName('to-do_trigger')[0];
    let new_todo_button = document.getElementsByClassName('to-do_body_add_title')[0];
    let todo_container = document.getElementsByClassName('to-do_container')[0];
    let add_todo_container = document.getElementsByClassName('to-do_body_add')[0];

    new_todo_button.addEventListener('click', () => {
        add_todo_container.classList.contains('active-todo') ? add_todo_container.classList.remove('active-todo') : add_todo_container.classList.add('active-todo');
    })

    todo_trigger.addEventListener('click', () => {
        todo_container.classList.contains('active-todo') ? todo_container.classList.remove('active-todo') : todo_container.classList.add('active-todo');
    })
    

</script>