<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ app_name }}</title>
        {% if favicon %}
            <link rel="icon" href="{{ favicon }}">
        {% else %}
            <link rel="icon" type="image/png" href="{{ url_for('maeser.static', filename='maeser.png') }}">
        {% endif %}        
        <link rel="stylesheet" href="{{ url_for('maeser.static', filename='styles.css') }}">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        {% block head %}
        {% endblock %}
    </head>
    <body>
        <div id="main-app">
            <header>
                <div class="header-wrapper">
                    <div id="logo-tab">
                        <button id="tab"><i class="fa fa-bars"></i></button>
                        {% if main_logo_dark %}
                            <img src="{{ main_logo_dark }}">
                        {% else %}
                            <img src="{{ url_for('maeser.static', filename='maeser-dark.png') }}">
                        {% endif %}
                    </div>
                    {% if rate_limiting %}
                        <div id="rate-limit" style="color: white;">
                            <p>
                                <span id="requests-remaining">{{requests_remaining}}</span> / 
                                <span id="max-requests-remaining">{{max_requests_remaining}}</span>
                            </p>
                        </div>
                    {% endif %}
                </div>
            </header>

            <nav id="side-bar" class="hide">
                <div id="side-bar-top-buttons">
                    <h3 style="margin: 0 .8rem">New Chat</h3>
                    <button id="reset-button"><i class="bi bi-file-earmark-plus-fill"></i></button>
                </div>
                <div id="side-bar-links">
                    {% for link in links %}
                        <div class="chat-history-button-container">
                            <button class="chat-history-button" data-session="{{link.session}}" data-branch="{{link.branch}}">
                                <p class="chat-history-name">{{link.header}}</p>
                                <p class="chat-history-branch">{{link.branch}}</p>
                            </button>
                        </div>
                    {% endfor %}
                </div>
                {% if user_management %}
                    <div id="side-bar-bottom-buttons">
                        {% if is_admin %}
                            <button id="user-management-button">User Management</button>
                            <button id="logs-button">Logs</button>
                        {% endif %}
                        <button id="train-button">Help Train {{ app_name }}</button>
                        <button id="logout-button" style="background-color: black; color: white;">Logout</button>
                        {# <button id="settings">Settings</button> #}
                    </div>
                {% endif %}
            </nav>

            {% block content %}
            Not implemented yet.
            {% endblock %}
        <script src="{{ url_for('maeser.static', filename='chat.js') }}"></script>
        </div>
    </body>
</html>