{% extends "YOUCommercantBundle::min.html.twig" %}

{% block container %}
    <style>

        #messagerie {
            margin-left:-241px!important;
        }
        #messagerie ul {
            padding:0;
            margin:0;
            list-style:none;
            float:left;
            width:200px;
            height:400px;
            overflow-y:auto;
            overflow-x:hidden;
            background:#fff;
        }
        #messagerie ul a{
            display: block;
            padding:8px 5px;
            background:#ffffff;
            border-bottom: 1px solid #eee;
        }
        #messagerie ul a.current {
            color:#fff;
            background:#99cc33;
        }
        #messagerie ul a i{
            float:right;
            margin-top:3px;
        }
        #messagerie ul a.create {
            text-align: center;
            font-weight: bold;
        }
        #messagerie ul a:hover{
            background: #eee;
        }
        #messagerie {
            width: 800px;
            height:400px;
        }
        #content {
            height:400px;
            width: 599px;
            border-left:1px solid #eee;
            overflow-y:auto;
            overflow-x:hidden;
            background:#fff;
            margin:0;
        }

        #messageForm {
            padding:15px 15px 45px 15px;
            margin-bottom:15px;
            background: #f7f7f7;
        }
        #messageForm textarea {
            width: 523px;
            height:30px;
            padding:15px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        #messageForm:hover textarea, #messageForm textarea:focus {
            height:80px;
        }


        #messageForm input {
            float:right;
        }

        #content .messages div {
            padding:10px 15px;
            border-bottom: 1px solid #eee;
        }
        #content .messages .date {
            float:right;
            font:12px tahoma;
            color:#999;
        }
        #content .messages .from {
            font:14px tahoma;
            color:#000;
        }
        #content .messages .from.me {
            color:#666;
            font:13px tahoma;
        }
        #content .messages .body {
            font:12px tahoma;
        }
    </style>
<div id="messagerie">

    {% include 'YOUCommercantBundle:Message:list.html.twig' %}

    <div id="content">
        {% if (threads|length == 0 and nouveau == false) %}
            <p style="padding:50px;text-align: center;">Aucun message reçu</p>
        {% endif %}
        {% if thread == false %}
            {% if nouveau %}
                <div class="new">
                    {% include 'YOUCommercantBundle:Message:form.html.twig' %}
                </div>        {% endif %}
        {% else %}
            {% include 'YOUCommercantBundle:Message:thread.html.twig' %}
        {% endif %}
    </div>


</div>


{% endblock %}

{% block append_javascript %}

    {{ parent() }}

{% endblock %}