{% extends '::base2.html.twig' %}
{% block title %} Messagerie{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

    <div class="page-wrapper">
        <!-- BEGIN HEADER -->
        <div class="page-header navbar navbar-fixed-top">
            {% include 'client_representant/header.html.twig' %}
        </div>
        <!-- END HEADER -->

        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"> </div>
        <!-- END HEADER & CONTENT DIVIDER -->

        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            <!-- BEGIN SIDEBAR -->
            <div class="page-sidebar-wrapper">
                <!-- BEGIN SIDEBAR -->
                <div class="page-sidebar navbar-collapse collapse">
                    {% include 'client_representant/menu.html.twig' %}
                </div>
                <!-- END SIDEBAR -->
            </div>
            <!-- END SIDEBAR -->

            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->

                <div class="main-content" >
                    <div class="wrap-content container" id="container">
                        <div class="wrap-messages">
                            <div id="inbox" class="inbox">
                                <!-- start: EMAIL OPTIONS -->
                                <div class="col email-options perfect-scrollbar">
                                    <div class="padding-15">
                                        <button class="btn btn-primary btn-block margin-bottom-30">
                                            Compose
                                        </button>
                                        <p class="email-options-title no-margin">
                                            BROWSE
                                        </p>
                                        <ul class="main-options padding-15">
                                            <li>
                                                <a href="#">
                                                    <span class="title"><i class="ti-import"></i> Inbox</span>
                                                    <span class="badge pull-right">10</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="title"><i class="ti-upload"></i> Sent</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="title"><i class="ti-na"></i> Spam</span>
                                                    <span class="badge pull-right">1</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="title"><i class="ti-star"></i> Starred</span>
                                                    <span class="badge pull-right">2</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- end: EMAIL OPTIONS -->
                                
                                <!-- start: EMAIL READER -->
                                <div class="email-reader perfect-scrollbar">
                                    <div>
                                        <div class="user-chat">
                                            <div class="chat-content">
                                                <div class="sidebar-content perfect-scrollbar ps-container ps-active-y">
                                                    <ol id="" class="discussion">
                                                    </ol>
                                                    <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
                                                        <div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
                                                    </div>
                                                    <div class="ps-scrollbar-y-rail" style="top: 0px; height: 854px; right: 3px;">
                                                        <div class="ps-scrollbar-y" style="top: 0px; height: 530px;"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="message-bar">
                                                <div class="message-inner">
                                                    <div class="message-area">
                                                        <textarea placeholder="Message" class="" id="message-send" required></textarea>
                                                    </div>
                                                    <a class="link linked" id="">
                                                        <i class="fa fa-send"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end: EMAIL READER -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END CONTENT BODY -->
            </div>
            <!-- END CONTENT -->

        </div>
        <!-- END CONTAINER -->

    </div>

    <!-- BEGIN FOOTER -->
    <div class="page-footer">
        {% include 'commun/footer.html.twig' %}
    </div>
    <!-- END FOOTER -->
    {% block javascripts %}
        {{ parent() }}
{% endblock %}

{% endblock %}