{% extends "base.html" %}
{% block includes %}
  <script src="{{ absolute_url_for('static', component="base", filename=jsname) }}"></script>
  <script src="{{ absolute_url_for('static', component="base", filename='twemoji-17.0.2.min.js') }}"></script>
  <link href="{{ absolute_url_for('static', component="base", filename='theme.css') }}?{{ cachebust }}" rel="stylesheet" />
  <link href="{{ absolute_url_for('static', component="base", filename='chat.css') }}?{{ cachebust }}" rel="stylesheet" />
  <link href="{{ absolute_url_for('static', component="base", filename='highlight.css') }}?{{ cachebust }}" rel="stylesheet" />
  <link href="{{ absolute_url_for('static', component="base", filename='autocomplete.css') }}?{{ cachebust }}" rel="stylesheet" />
  <link href="{{ absolute_url_for('static', component="base", filename='emojisearch.css') }}?{{ cachebust }}" rel="stylesheet" />
  <link href="{{ absolute_url_for('static', component="base", filename='jquery.modal.css') }}?{{ cachebust }}" rel="stylesheet" />
  <script>
    window.twemojiOptions = {
        base: "{{ absolute_url_for('static', component="base", filename='twemoji/') }}",
        attributes: function( _icon, _variant ) {
            return {
                width: "72",
                height: "72",
            };
        },
    };
    window.versionCheck = "{{ absolute_url_for('chat.version', component="base") }}";
    window.uploadIcon = "{{ absolute_url_for('upload.icon_upload', component="upload") }}";
    window.uploadAvatar = "{{ absolute_url_for('upload.avatar_upload', component="upload") }}";
    window.uploadNotifications = "{{ absolute_url_for('upload.notifications_upload', component="upload") }}";
    window.uploadAttachments = "{{ absolute_url_for('upload.attachments_upload', component="upload") }}";
    window.mimetypes = {{ mimetypes|tojson|safe }};
    window.desktopSize = {{ desktopSize|tojson|safe }};
    window.mobileSize = {{ mobileSize|tojson|safe }};
    window.appname = {{ title|tojson|safe }};
    window.version = {{ version|tojson|safe }};
    window.emojis = {{ emojis|tojson|safe }};
    window.emotes = {{ emotes|tojson|safe }};
    window.emojicategories = {{ emojicategories|toorderedjson|safe }};
    window.userid = {{ userid|tojson|safe }};
    window.username = {{ username|tojson|safe }};
    window.admin = {{ admin|tojson|safe }};
    window.maxabout = {{ config.limits.about_length|tojson|safe }};
    window.maxmessage = {{ config.limits.message_length|tojson|safe }};
    window.maxalttext = {{ config.limits.alt_text_length|tojson|safe }};
    window.maxiconsize = {{ config.limits.icon_size|tojson|safe }};
    window.maxicondimensions = {{ maxicondimensions|tojson|safe }};
    window.maxnotificationsize = {{ config.limits.notification_size|tojson|safe }};
    window.maxattachmentsize = {{ config.limits.attachment_size|tojson|safe }};
    window.maxattachments = {{ config.limits.attachment_max|tojson|safe }};
    window.reactionsenabled = {{ config.reactions.enabled|tojson|safe }};
    window.reactionsdefaults = {{ reactionsdefaults|tojson|safe }};
    window.defavi = {{ defavi|tojson|safe }};
    window.defroom = {{ defroom|tojson|safe }};
    window.silence = {{ absolute_url_for('static', component="base", filename='silence.mp3')|tojson|safe }};
  </script>
{% endblock %}
{% block content %}
    <div class="menu">
        <div class="header">
            <button class="instance" type="button">
                <img class="icon" src="{{ favicon }}" />
                <div class="instance-title">
                    {{ title }}
                </div>
            </button>
        </div>
        <div class="rooms" tabindex="-1">
        </div>
        <div class="actions">
            <div class="item">
                <button type="button" id="search-chat">
                    <div class="maskable search-svg"></div>
                    find or start chat
                </button>
            </div>
            {% if config.account_registration.invites or admin %}
                <div class="item">
                    <button type="button" id="invite-user">
                        <div class="maskable invite-svg"></div>
                        invite someone
                    </button>
                </div>
            {% endif %}
        </div>
        <div class="actions">
            <div class="item">
                <button type="button" id="edit-preferences">
                    <div class="maskable edit-svg"></div>
                    edit preferences
                </button>
            </div>
            <div class="item">
                <button type="button" id="edit-profile">
                    <div class="maskable edit-svg"></div>
                    edit profile
                </button>
            </div>
            <div class="item">
                <button type="button" id="log-out">
                    <div class="maskable logout-svg"></div>
                    log out
                </button>
            </div>
        </div>
    </div>
    <div class="chat">
        <div class="top-info">
            <button class="back">
                <div class="maskable back-button-svg"></div>
                <div class="badge empty"><div class="count"></div></div>
            </button>
            <div class="icon hidden">
                <img />
                <div class="room-indicator">#</div>
            </div>
            <div class="info-wrapper">
                <div class="title">&nbsp;</div>
            </div>
            <div class="info-wrapper">
                <div class="topic">&nbsp;</div>
            </div>
            <button class="info">
                <div class="maskable info-button-svg"></div>
            </button>
        </div>
        <div class="conversation-wrapper">
            <div class="conversation">
                <div class="loading-wrapper">
                    <div class="loading">
                        Now loading your chat...
                    </div>
                </div>
            </div>
        </div>
        <div class="preload">
            <div class="maskable message-visible"></div>
            <div class="maskable message-sensitive"></div>
            <div class="maskable attachment-picker"></div>
        </div>
        <form class="actions" action="" method="POST" id="message-actions">
            <div class="newmessage">
                <div class="new-messages-alert">new messages</div>
                <input type="text" id="message" autocomplete="off" placeholder="Type a message..." />
                <button type="button" class="maskable message-visibility message-visible"></button>
                <button type="button" class="maskable attachment-picker"></button>
                <button type="button" class="emoji-search"></button>
            </div>
            <div class="send">
                <button type="submit" id="sendmessage" disabled>send</button>
            </div>
            <div class="info">
                <button type="button" id="infotoggle">info</button>
            </div>
        </form>
        <form class="uploads" action="" method="POST" id="message-upload">
            <input type="file" id="message-files" multiple />
        </form>
    </div>
    <div class="info hidden">
        <div class="header">
            <button class="back">
                <div class="maskable back-button-svg"></div>
                 <div class="badge empty"><div class="count"></div></div>
            </button>
            <div class="title-wrapper">
                <span class="title" id="room-title" dir="auto"></span>
                <span class="desc">with the following members:</span>
            </div>
        </div>
        <div class="occupants" tabindex="-1">
        </div>
        <div class="actions">
            <div class="item">
                <button type="button" id="edit-info">
                    <div class="maskable edit-svg"></div>
                    edit info
                </button>
            </div>
            <div class="item">
                <button type="button" id="invite-chatter">
                    <div class="maskable invite-svg"></div>
                    send invite
                </button>
            </div>
            <div class="item">
                <button type="button" id="leave-room">
                    <div class="maskable leave-svg"></div>
                    <span id="leave-type">leave chat</span>
                </button>
            </div>
        </div>
    </div>

    {% include "modals/search.html" %}
    {% include "modals/profile.html" %}
    {% include "modals/editpreferences.html" %}
    {% include "modals/editprofile.html" %}
    {% include "modals/chatdetails.html" %}
    {% include "modals/infomodal.html" %}
    {% include "modals/warningmodal.html" %}
    {% include "modals/alttextmodal.html" %}
{% endblock %}