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

{% block contenu %}
{% set currentUrl = app.request.attributes.get('_route') %}

    <nav aria-label="breadcrumb" class="intra-breadcrumbs">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ absolute_url(customPath('worker_home_intra')) }}">{{'myAccount.home_intra'|trans|upper}}</a></li>
            <li class="breadcrumb-item active"><a href="{{ absolute_url(customPath('worker_follow')) }}">{{'myAccount.bloc_follow'|trans|upper}}</a></li>
        </ol>
    </nav>
    {# Affichage des mails #}
    <section id="intra-worker-mails">  

        {% for messages in workerMessages %}

        <div class="mail-item">
            <div class="mail-header row">
                <div class="font-eye col-1">
                    <i class="fa fa-eye {% if not messages.isRead %}font-new{% endif %}" data-link="toggle-mail-{{messages.id}}"></i>
                </div>
                <div class="msg-date-button col-11">
                    <p>{{messages.sentAt|date("d/m/Y")}} : {{messages.firstName}} {{messages.lastName}} - {{messages.description|slice(0,60)}} ...</p>
                    <a href="#collapse-{{messages.id}}" class="mail-show-hide {% if not messages.isRead %}toggle-new{% endif %}" data-show="{{messages.id}}" data-toggle="collapse" data-read="{{messages.isRead ? 'true' : 'false' }}" role="button" aria-expanded="false" aria-controls="collapse-{{messages.id}}" id="toggle-mail-{{messages.id}}">AFFICHER</a>
                </div>
            </div>
            {# A faire collapse avec le boutton masquer/afficher #}
            <div class="mail-content-notes row collapse" id="collapse-{{messages.id}}">
                <div class="mail-content offset-1 col-7">
                    <div class="mail-message">
                        <div class="from-subject-msg">
                            <p>{{messages.firstName}} {{messages.lastName}}</p>
                            <p>{{'email.from'|trans}} : {{messages.email}} - {{'forms.phone'|trans|upper}} : {{messages.phone}}</p>
                        </div>
                        <p class="read-message">
                            {{messages.description}}
                        </p>
                        {% if messages.attachment %}
                            <p class="read-message">
                                <a href="{{messages.attachment}}" target="_blank">voir la pièce jointe</a>
                            </p>
                        {% endif %}
                    </div>
                </div>
                {# data mail = id mail #}
                <div class="mail-notes col-4" data-mail="{{messages.id}}" >
                    <div class="note write-note collapse show" id="notice-note-{{messages.id}}" data-toggle="toggle">
                        <i class="fa fa-file-text"></i>
                        <p>{{'email.notes'|trans}}</p>
                    </div>
                    <div class="note display-note form-group collapse " id="edit-note-{{messages.id}}" data-toggle="toggle">
                        {# data-notice = return to the previous state #}
                        <textarea class="form-control note-textarea note-editor" data-notice="notice-note-{{messages.id}}">{{messages.note}}</textarea>
                    </div>
                </div>

            </div>
        </div>

        {% endfor %}

        <div class="navigation">
            {{ knp_pagination_render(workerMessages) }}
        </div>
    </section>

{% endblock %}

{% block javascripts %}

<script>
    const urlMailRead = "{{ absolute_url(customPath('worker_message_visualise')) }}";
    const urlMailNote = "{{ absolute_url(customPath('worker_edit_note')) }}";
</script>
<script src="{{ asset('lib/js/intranet-message.js')}}"></script>

{% endblock %}