{% extends "dictionary/base.html" %}

{% load widget_tweaks %} {% load i18n %}

{% block content %}
    <h1 class="h4">
        <strong>{% trans "messages" context "titleblock" %}</strong>
        <small>
            {% if user.unread_message_count > 0 %}
                <span class="ml-2">({{ user.unread_message_count }} {% trans "unread" %})</span>
            {% endif %}
            {% block titlemeta %}{% endblock %}
        </small>
    </h1>

    {% url 'messages' as messages %}
    {% url 'messages-archive' as archive %}

    <div class="d-flex justify-content-between nav-tabs my-3">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link{% if request.path == messages %} active{% endif %}" href="{% url 'messages' %}">{% trans "inbox" %}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link{% if request.path == archive %} active{% endif %}" href="{% url 'messages-archive' %}">{% trans "archive" %}</a>
            </li>
        </ul>
        {% include "dictionary/includes/paginaton.html" with paginator=page_obj classlist="lf_pagination m-0" %}
    </div>

    {% block innercontent %}{% endblock %}

    {% if conversations %}
        <div class="mb-3 border rounded p-3 bg-light d-flex justify-content-between">
            <div class="d-flex justify-content-center">
                <a role="button" tabindex="0" class="mr-3 chat-delete svg-group">
                    <svg fill="currentColor" viewBox="0 0 16 16" width="16" height="16">
                        <use href="#trash"></use>
                    </svg>
                    <span class="ml-2">{% trans "delete" %}</span>
                </a>
                {% if request.path == messages %}
                    <a role="button" tabindex="0" class="chat-archive svg-group">
                        <svg fill="currentColor" viewBox="0 0 16 16" width="16" height="16">
                            <use href="#archive"></use>
                        </svg>
                        <span class="ml-2">{% trans "archive" context "verb" %}</span>
                    </a>
                {% endif %}
            </div>
            <a role="button" tabindex="0" class="chat-reverse svg-group">
                <svg fill="currentColor" viewBox="0 0 16 16" width="16" height="16">
                    <use href="#layers"></use>
                </svg>
                <span class="ml-2">{% trans "invert" %}</span>
            </a>
        </div>
    {% endif %}
{% endblock %}

{% block rightframe %}
    <form action="{% url 'messages' %}" method="get" class="mb-3">
        <label for="messages_search_term"><h2 class="h5"><strong>{% trans "search in messages" %}</strong></h2></label>
        <div class="input-group">
            <input name="search_term" id="messages_search_term" type="text" class="form-control" placeholder="{% trans "search keywords" %}" value="{{ request.GET.search_term }}" required>
            <div class="input-group-append">
                <button class="btn btn-django-link" type="submit">{% trans "go" %}</button>
            </div>
        </div>
    </form>

    <form method="post">
        <h2 class="h5"><strong>{% trans "new message" %}</strong></h2>

        <div class="form-group position-relative">
            <label for="recipient_name">{{ form.recipient.label }}:</label>
            {% render_field form.recipient class="form-control author-search" id="recipient_name" %}
        </div>

        <div class="form-group">
            <label for="message-body">{{ form.body.label }}:</label>
            {% render_field form.body rows="5" class="form-control" id="message-body" %}
        </div>

        {% csrf_token %}
        <button type="submit" class="btn btn-django-link">{% trans "send" %}</button>
    </form>
{% endblock %}