{% extends 'layout/template.twig' %}

{% block content %}
    <!-- barra superior titulo de pagina-->
    <div class="div-title bg-color-other">
        <div class="container">
            <div class="row">
                <div class="col-xs-10 col-sm-11">
                    {{ title }}
                </div>
                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                </div>
            </div>
        </div>
    </div>
    <!--contenido-->

    <div class="container mt20 pb40" >
        <div class="col-container">
            {#**********************************************listado de la conversación en formato chat**********************************************#}

            <!--CONSULTA CLIENTE INICIAL SE MUESTRA ASUNTO, CUERPO, FECHA Y ESTADO DE CONSULTA-->
            <div class="row">
               {#contenido#}
                <div class="col-xs-12 text-right">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                    <p class="font-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim sit amet nibh at ultrices. Cras bibendum, turpis ac dapibus feugiat, lorem nisl porttitor enim, sed finibus ligula diam vitae erat. Sed justo magna, accumsan in blandit euismod, interdum eu dui. Aliquam erat volutpat. Donec sodales velit et ullamcorper dignissim. Aliquam euismod porta leo, ac pellentesque turpis rhoncus vitae. Sed non tempor ante. Duis non venenatis mauris, eu ultricies justo. Praesent at augue ante.</p>
                    <p><i class="fa fa-calendar"></i> 12/04/2019</p>
                    <p class="color-menus-saludables"><i class="fa fa-envelope"></i> Respuesta</p>
                </div>
            </div>
            <hr>
            <!--RESPUESTAS, SOLO SE MUSTRA EL CUERPO DE LA RESPUESTA Y LA FECHA, NO EL ASUNTO QUE SE REPITE-->

            <!--respuesta NUTRICIONISTA -->
            <div class="row">
                {#icono cliente#}
                <div class="col-sm-2 text-center">
                    <img src="assets/img/consultas/nutricionista_sm.png" class="img-responsive-custom img-circle"/>
                    <p class="mt10">Victoria Fagundez</p>
                </div>
                {#contenido#}
                <div class="col-sm-10">
                    <p class="font-dark"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim sit amet nibh at ultrices. Cras bibendum, turpis ac dapibus feugiat, lorem nisl porttitor enim, sed finibus ligula diam vitae erat. Sed justo magna, accumsan in blandit euismod, interdum eu dui. Aliquam erat volutpat. Donec sodales velit et ullamcorper dignissim. Aliquam euismod porta leo, ac pellentesque turpis rhoncus vitae. Sed non tempor ante. Duis non venenatis mauris, eu ultricies justo. Praesent at augue ante.</p>
                    <p><i class="fa fa-calendar"></i> 13/04/2019</p>
                </div>
            </div>
            <hr>
            <!--respuesta CLIENTE -->
            <div class="row">
                {#contenido#}
                <div class="col-xs-12 text-right">
                    <p class="font-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim sit amet nibh at ultrices. Cras bibendum, turpis ac dapibus feugiat, lorem nisl porttitor enim, sed finibus ligula diam vitae erat. Sed justo magna, accumsan in blandit euismod, interdum eu dui. Aliquam erat volutpat. Donec sodales velit et ullamcorper dignissim. Aliquam euismod porta leo, ac pellentesque turpis rhoncus vitae. Sed non tempor ante. Duis non venenatis mauris, eu ultricies justo. Praesent at augue ante.</p>
                    <p><i class="fa fa-calendar"></i> 14/04/2019</p>
                </div>
            </div>
            <hr>
            <!--respuesta NUTRICIONISTA -->
            <div class="row">
                {#icono cliente#}
                <div class="col-sm-2 text-center">
                    <img src="assets/img/consultas/nutricionista_sm.png" class="img-responsive-custom img-circle"/>
                    <p class="mt10">Victoria Fagundez</p>
                </div>
                {#contenido#}
                <div class="col-sm-10">
                    <p class="font-dark"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dignissim sit amet nibh at ultrices. Cras bibendum, turpis ac dapibus feugiat, lorem nisl porttitor enim, sed finibus ligula diam vitae erat. Sed justo magna, accumsan in blandit euismod, interdum eu dui. Aliquam erat volutpat. Donec sodales velit et ullamcorper dignissim. Aliquam euismod porta leo, ac pellentesque turpis rhoncus vitae. Sed non tempor ante. Duis non venenatis mauris, eu ultricies justo. Praesent at augue ante.</p>
                    <p><i class="fa fa-calendar"></i> 15/04/2019</p>
                </div>
            </div>

            {#**********************************************FORMULARIO RESPUESTA**********************************************#}
            <hr>
            <div class="row">
                <div class="col-sm-10 col-md-11">
                    <textarea rows="5"  class="form-control" name="subject" id="body" value="" placeholder="Responder..."></textarea>
                </div>
                <div class="col-sm-2  col-md-1">
                    <div class="mt20">
                        <a class="btn btn-custom btn-other" title="Enviar"><i class="fa fa-send"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}




