{% extends "base.html" %}

{% load static %}
{% load i18n %}

{% block content-title %}{% endblock %}

{% block content %}
    <noscript>
        {% trans "JavaScript must be enabled on your browser to access chat." %}
    </noscript>
    <div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
        </div>
    </div>

    <div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
         style="height: 95vh" id="chat-container">
        <div class="card-header">
            <h3>
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
                        aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span id="channel-title"></span>
                <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
                    <i class="fas fa-expand"></i>
                </button>
            </h3>
        </div>
        <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
            <div class="text-center d-none" id="fetch-previous-messages">
                <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
                    {% trans "Fetch previous messages…" %}
                </a>
                <hr>
            </div>
            <ul class="list-group list-group-flush" id="message-list"></ul>
        </div>
        <div class="card-footer mt-auto">
            <form onsubmit="event.preventDefault(); sendMessage()">
                <div class="input-group">
                    <label for="input-message" class="input-group-text">
                        <i class="fas fa-comment"></i>
                    </label>
                    <input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
                    <button class="input-group-text btn btn-success" type="submit">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block extrajavascript %}
    {# This script contains all data for the chat management #}
    <script src="{% static 'chat.js' %}"></script>
{% endblock %}