{% extends 'layouts/members.twig' %}

{% block members_content %}

    {% set title = 'Message: ' ~ thread.getLatestMessageAttribute().text|striptags|truncate(20, true, "...")|raw %}

    {% if thread.deleted_at is not empty %}
        {% set title = 'Closed thread' %}
    {% endif %}

    {% include 'includes/elements/intro_block.twig' with {
        intro_title: title,
        intro_content: false,
        class: 'membersIntro',
        use_h1: true
    }%}

    <div class="membersContentWrap">

        <div class="messageThreads">

            {% if thread.deleted_at is not empty %}
                <p class="error">This thread has now been closed</p>
            {% endif %}

            <div class="chatLogContainer">

                {#<h3>{{ name }}</h3>#}

                <ul id="chat-log" class="chatLog">

                    {% for message in messages %}

                        <li class="{% if member.id == message.member_id %}user{% else %}admin{% endif %}">

                            <div class="messageBox">

                                <div class="boxLeft">
                                    {% if member.id == message.member_id %}
                                        <i class="fal fa-user"></i>
                                    {% else %}
                                        <i class="fal fa-user-md-chat"></i>
                                    {% endif %}
                                </div> <!-- .boxLeft -->

                                <div class="boxRight">

                                    <div class="boxHeader">

                                        <div class="boxHeaderLeft">
                                            <h4>
                                                {% if member.id == message.member_id %}
                                                    {{ message.member.addressBilling.firstname }}
                                                {% else %}
                                                    {{ message.admin_user.name }}
                                                {% endif %}
                                            </h4>
                                        </div> <!-- .boxHeaderLeft -->

                                        <div class="boxHeaderRight">
                                            <span class="messageTime">{{ message.created_at|time_diff }}</span>
                                        </div> <!-- .boxHeaderRight -->

                                    </div> <!-- .boxHeader -->

                                    <div class="boxMessage">

                                        <div class="boxContent wysiwyg">
                                            {{ message.text|raw }}
                                        </div> <!-- .boxContent wysiwyg -->


                                        {% if member.id != message.member_id and message.satisfactory == 0 %}

                                            <div id="satisfactoryContainer-{{ message.id }}" class="userComments">

                                                <div class="replyButton">
                                                    <a href="#" class="js_rateReply">Rate this reply</a>
                                                </div>

                                                <form action="" class="sastisfactoryForm">

                                                    <div class="row">
                                                        {% for k,option in satisfactory_options %}
                                                            <input type="radio"
                                                                   name="satisfactory"
                                                                   value="{{ k }}"
                                                                   id="satisfactory-{{ message.id }}-{{ k }}"
                                                                   class="satisfactoryOption"
                                                                   data-message_id="{{ message.id }}"
                                                            />
                                                            <label for="satisfactory-{{ message.id }}-{{ k }}">{{ option }}</label>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="satisfactoryComment row" id="satisfactoryComment-{{ message.id }}">
                                                        <div class="row">
                                                            <label>Comment</label>
                                                            <div class="inputWrap">
                                                                <textarea name="comment" placeholder="Please tell us why"></textarea>
                                                            </div> <!-- .inputWrap -->
                                                        </div> <!-- .row -->
                                                    </div>
                                                    <div class="row">
                                                        <button type="submit" class="button">Submit</button>
                                                    </div>
                                                    <input type="hidden" name="message_id" value="{{ message.id }}" />
                                                    <input type="hidden" name="thread" value="{{ url }}" />
                                                </form>

                                            </div><!-- .userComments -->

                                        {% endif %}

                                    </div> <!-- .boxMessage wysiwyg -->

                                </div> <!-- .boxRight -->

                            </div> <!-- .messageBox -->

                        </li>

                    {% endfor %}

                </ul>

                <div class="chatReplyBox">

                    <h2>New message</h2>

                    <form action="/plugins/MembersMessaging/" method="post">

                        <div class="row">

                            <label for="reply">Message</label>

                            <div class="inputWrap">
                                <textarea id="reply" name="text" placeholder="Type your reply here"></textarea>
                            </div> <!-- .inputWrap -->

                        </div> <!-- .row -->


                        <input type="hidden" value="send" name="act" />
                        <input type="hidden" value="{{ url }}" name="url" />

                        <div class="actionButtons">

                            <div class="actionsLeft">
                                <a class="button" href="/members/messages/">Back</a>
                            </div> <!-- .actionsLeft -->

                            <div class="actionsRight">
                                <button class="button buttonAlt" type="submit">
                                    {% if thread.deleted_at is empty %}Send{% else %}Re-open{% endif %}
                                </button>
                            </div> <!-- .actionsLeft -->

                        </div> <!-- .actionButtons -->

                    </form>

                </div><!-- .replyRow -->

            </div>


        </div><!-- .messageThreads -->

    </div> <!-- .membersContentGrid -->

{% endblock %}
