{% load i18n %}

<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="alert alert-info d-none" id="alert-download-chat-app">
    {% trans "You can install a shortcut to the chat on your home screen using the download button on the header." %}
</div>

<div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' or fullscreen %} 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>
            {% if not fullscreen %}
                <button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
                    <i class="fas fa-expand"></i>
                </button>
            {% endif %}
            <button class="btn float-end d-none" type="button" id="install-app-home-screen" title="{% trans "Install app on home screen" %}">
                <i class="fas fa-download"></i>
            </button>
        </h3>
    </div>
    <div class="card-body d-flex flex-column-reverse flex-grow-0 overflow-y-scroll" 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…" %}" autofocus autocomplete="off">
                <button class="input-group-text btn btn-success" type="submit">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </form>
    </div>
</div>