{% if theme() and file_exists('app/templates/themes/' + theme() + '/base.html') %}
    {% extends 'themes/' + theme() + '/base.html' %}
{% else %}
    {% extends "base.html" %}
{% endif %}
{% set active_child = 'chats' %}
{% from 'bootstrap/form.html' import render_form %}

{% macro conversation_members(conversation) %}
    {% if len(conversation.members) == 2 %}
        {% for member in conversation.members %}
            {% if member.id != current_user.id %}
                <img src="{{ member.avatar_thumbnail() }}" loading="lazy" />
                {% if not conversation.read %}<strong>{% endif %}
                    {{ member.display_name() }}
                {% if not conversation.read %}</strong>{% endif %}
            {% endif %}
        {% endfor %}
    {% else %}
        {% for member in conversation.members %}
            {% if member.id != current_user.id %}
                {% if not conversation.read %}<strong>{% endif %}
                    {{ member.display_name() }}
                {% if not conversation.read %}</strong>{% endif %}
            {% endif %}
        {% endfor %}
    {% endif %}
{% endmacro %}

{% block app_content %}
<div class="row">
    <div class="row">
        <div class="col main_pane">
            <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
                <li class="breadcrumb-item active">{{ _('Chat') }}</li>
              </ol>
            </nav>
            <div class="row mt-3">
                <div class="col col-md-2 d-none d-md-block sender_list">
                    <h3>{{ _('People') }}</h3>
                    <ul class="list-group list-group-flush">
                    {% for conversation in conversations %}
                        <li class="list-group-item">
                            {% if conversation.id == current_conversation %}
                                {{ conversation_members(conversation) }}
                            {% else %}
                                <a href="{{ url_for('chat.chat_home', conversation_id=conversation.id) }}">
                                    {{ conversation_members(conversation) }}
                                </a>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                <div class="col col-md-10">
                    {% if messages %}
                        <h3 class="d-none d-md-inline">{{ _('Messages with %(name)s', name=conversation.member_names(current_user.id)) }}</h3>
                        <h3 class="d-md-none">{{ _('Messages with: ') }}
                            <select id="changeSender">{% for conversation in conversations %}
                                        <option value="{{ conversation.id }}" {{ 'selected' if conversation.id == current_conversation }}>{{ conversation.member_names(current_user.id) }}</option>
                                    {% endfor %}
                            </select></h3>
                        <div class="conversation mt-3">
                            {% for message in messages %}
                                <div id="message_{{ message.id }}" class="card message {{ 'from_other_party' if message.sender_id != current_user.id else 'from_me' }}">
                                    <div class="message_body">
                                        <span class="message_created_at text-muted small">{{ arrow.get(message.created_at).humanize(locale=locale) }}</span>
                                        <span class="message_sender"><a href="/u/{{ message.sender.link() }}">{{ message.sender.display_name() }}</a></span>: {{ message.body_html|safe }}
                                    </div>
                                </div>
                            {% endfor %}
                            {{ render_form(form) }}
                            <div class="dropdown">
                                <a 
                                    class="conversation_options btn btn-outline-secondary" 
                                    data-bs-toggle="dropdown" rel="nofollow noindex" 
                                    href="{{ url_for('chat.chat_options', conversation_id=current_conversation) }}" 
                                    class="btn btn-outline-secondary">
                                    {{ _('Options') }}
                                </a>
                                <ul class="dropdown-menu" style="max-width: 240px">
                                    <div 
                                        hx-get="{{ url_for('chat.chat_options', conversation_id=current_conversation) }}"
                                        hx-trigger="intersect once"
                                        hx-target="this"
                                        hx-swap="outerHTML"
                                    ></div>
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}