{% extends 'base_backend.html.twig' %}
{% block nombreMessage %}{{ nbrMsg }}{% endblock %}
{% block body %}

    <div class="row">
    <div class="tabs-left">
        <div class="col-lg-3">
            <div class="ibox ">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager">
                        <a class="btn btn-block btn-primary compose-mail" href="mail_compose.html"><i class="fa fa-refresh"></i> Actualiser</a>
                        <div class="space-25"></div>
                        <h5>Messages</h5>
                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li><a href="mailbox.html"> <i class="fa fa-inbox "></i> Boite de réception <span class="label label-warning float-right">{{ nbrMsg }}</span> </a></li>

                            <li><a href="mailbox.html"> <i class="fa fa-certificate"></i> Archivés</a></li>

                            <li><a href="mailbox.html"> <i class="fa fa-trash-o"></i> Supprimés</a></li>
                        </ul>
                        <h5>Etat</h5>
                        <ul class="nav nav-tabs">

                            <li><a href="#"> <i class="fa fa-circle text-navy"></i> Lus</a></li>
                            <li><a href="#"> <i class="fa fa-circle text-danger"></i> Non Lus</a></li>

                        </ul>


                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <form action="">
        <div class="col-lg-9 animated fadeInRight">
            <div class="mail-box-header">


                <h2>
                    Boite de réception (16)
                </h2>
                <div class="mail-tools tooltip-demo m-t-md">
                    <div class="btn-group float-right">
                        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
                        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>

                    </div>

                    <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" href="{{ path('messageAct',{'id':1}) }}" ><i class="fa fa-eye"></i> </a>
                    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" ><i class="fa fa-exclamation"></i> </button>
                    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" ><i class="fa fa-trash-o"></i> </button>

                </div>
            </div>
            <div class="mail-box">
                <div class="wrapper wrapper-content animated fadeInRight">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox ">

                                <div class="ibox-content">

                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover dataTables-example" >
                                            <thead>
                                            <tr>
                                                <th><input type="checkbox" class="i-checks" ></th>
                                                <th>Nom & Pr&nom</th>
                                                <th>Sujet</th>

                                                <th>Date</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for m in messages %}
                                                {% if m.vu=='1' %}
                                                    <tr class="read">
                                                {% else  %}
                                                    <tr class="unread">
                                                {% endif %}

                                                <td class="check-mail">

                                                    <input type="checkbox" class="i-checks" value ="{{ m.id }}" id="{{ m.id }}"  name="Karim {{ m.id }}">
                                                </td>
                                                <td class="mail-ontact"><a href="{{ path('messageDetail',{'id':m.id}) }}">
                                                        {% if m.etat=='Nouveau' %}
                                                            <i class="fa fa-inbox "></i>
                                                        {% elseif m.etat=='Archive' %}
                                                            <i class="fa fa-certificate"></i>
                                                        {% elseif m.etat=='Supprime' %}
                                                            <i class="fa fa-trash-o"></i>
                                                        {% endif %}
                                                        {% if m.vu=='1' %}
                                                            <i class="fa fa-circle text-navy"></i>
                                                        {% else %}
                                                            <i class="fa fa-circle text-danger"></i>
                                                        {% endif %}{{ m.nom }}</a></td>
                                                <td class="mail-subject"> <a href="{{ path('messageDetail',{'id':m.id}) }}">{{ m.titre }}</a></td>

                                                <td class="text-right mail-date">{{ m.date|date("m/d") }}</td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>

                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        </form>
    </div>

{% endblock %}