{% extends '@LcSov/adminlte/layout.html.twig' %}
{% import '@LcSov/adminlte/macro/infobox.html.twig' as macro %}

{% block content_title %}
    {{ 'detail'|lc_trans_admin_title(ea.getEntity().getFqcn(), {id: ea.getEntity().getInstance().getId()}) }}
{% endblock %}

{% block main %}
    {{ dump() }}
    <div class="row">
        <div class="col-4">
            {% embed '@LcSov/adminlte/embed/infobox.html.twig' %}
                {% block color %}blue{% endblock %}
                {% block icon %}fa fa-toggle-on{% endblock %}
                {% block title %}Status{% endblock %}
                {% block content %}
                    {{ entity.instance.status }}
                {% endblock %}
            {% endembed %}

            {% embed '@LcSov/adminlte/embed/infobox.html.twig' %}
                {% block color %}blue{% endblock %}
                {% block icon %}fa fa-user{% endblock %}
                {% block title %}Utilisateur{% endblock %}
                {% block content %}
                    {{ entity.instance.getUserInfosTicket() }}
                {% endblock %}
            {% endembed %}

            {{ macro.infobox('Date',entity.instance.createdAt|date('d/m/Y'), "yellow", "fa fa-calendar") }}
            {{ macro.infobox('Catégorie',entity.instance.getTypeLabel()|trans({},'admin'), "green", "fa fa-archive") }}
        </div>
        <div class="col-8">
            {% embed '@LcSov/adminlte/embed/card.html.twig' %}
                {% block css %}card-primary{% endblock %}
                {% block header %}
                    <h3 class="card-title">
                        Liste des messages
                    </h3>
                {% endblock header %}

                {% block body_wrapper %}
                    <div class="card-body row">
                        <div class="col-12  direct-chat-primary">
                            {% for message in entity.instance.ticketMessages %}
                                <div class="direct-chat-msg {{ message.answerByAdmin ? 'right' }}">
                                    <div class="direct-chat-infos clearfix">
                                        <div class="direct-chat-name {{ message.answerByAdmin ? 'float-right' : 'float-left' }}">
                                            {{ message.createdBy }}
                                        </div>
                                        <div class="direct-chat-timestamp  {{ message.answerByAdmin ? 'float-left' : 'float-right' }}">
                                            {{ message.createdAt|date('d/m/Y H:i') }}
                                        </div>
                                    </div>
                                    {% if message.answerByAdmin %}
                                        <div class="direct-chat-img align-items-center">
                                            <i class="fa fa-user-circle" style="font-size: 2rem; color: red"></i>
                                        </div>
                                    {% else %}
                                        <div class="direct-chat-img align-items-center">
                                            <i class="fa fa-user-circle" style="font-size: 2rem"></i>
                                        </div>
                                    {% endif %}
                                    <div class="direct-chat-text">
                                        <p>{{ message.message|nl2br }}</p>
                                        {% if message.imageFilename is not null %}
                                            <i>Photo jointe au message : </i> <br/>
                                            <a href="{{ lc_liip(message.imageFilename, 'big') }}"
                                               data-toggle="lightbox">
                                                <img src="{{ lc_liip(message.imageFilename, 'thumb') }}"
                                                     alt="Illustration ticket"/>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endblock %}
            {% endembed %}
        </div>
    </div>
{% endblock %}