<!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') }}">
</head>
<body>
    <!--
    © 2024 Carson Bush, Blaine Freestone

    This file is part of Maeser.

    Maeser is free software: you can redistribute it and/or modify it under the terms of
    the GNU Lesser General Public License as published by the Free Software Foundation,
    either version 3 of the License, or (at your option) any later version.

    Maeser is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
    without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
    PURPOSE. See the GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License along with
    Maeser. If not, see <https://www.gnu.org/licenses/>.
    -->

    <header>
        <div class="header-wrapper">
            <div id="logo-tab">
                <a href="/">
                    {% if main_logo_chat %}
                    <img src="{{ main_logo_chat }}" class="logo">
                    {% else %}
                    <img src="{{ url_for('maeser.static', filename='maeser-dark-header.png') }}" class="logo">
                    {% endif %}
                </a>
            </div>
            <h2 style="color: white;">{{ app_name }} — Chat Logs Management</h2>
        </div>
    </header>


    {% if log_files is not undefined %}
    <section id="log-files-section">
        <h1 style="margin-top: 4rem">List of Log Files</h1>
        <div>
            <label for="log-sort-by">Sort by:</label>
            <select id="log-sort-by">
                <option value="created" {% if sort_by == 'created' %}selected{% endif %}>Creation Time</option>
                <option value="modified" {% if sort_by == 'modified' %}selected{% endif %}>Modification Time</option>
            </select>

            <label for="log-order">Order:</label>
            <select id="log-order">
                <option value="asc" {% if order == 'asc' %}selected{% endif %}>Ascending</option>
                <option value="desc" {% if order == 'desc' %}selected{% endif %}>Descending</option>
            </select>

            <label for="log-branch-filter">Branch:</label>
            <select id="log-branch-filter">
                <option value="" {% if branch_filter == '' %}selected{% endif %}>All Branches</option>
                {% for branch in branches %}
                    <option value="{{ branch }}" {% if branch_filter == branch %}selected{% endif %}>{{ branch }}</option>
                {% endfor %}
            </select>

            <label for="log-user-filter">User:</label>
            <select id="log-user-filter">
                <option value="" {% if user_filter == '' %}selected{% endif %}>All Users</option>
                {% for user in users %}
                    <option value="{{ user }}" {% if user_filter == user %}selected{% endif %}>{{ user }}</option>
                {% endfor %}
            </select>

            <label for="log-feedback-filter">Feedback:</label>
            <select id="log-feedback-filter">
                <option value="" {% if feedback_filter is none %}selected{% endif %}>All</option>
                <option value="true" {% if feedback_filter %}selected{% endif %}>With Feedback</option>
                <option value="false" {% if not feedback_filter and feedback_filter is not none %}selected{% endif %}>Without Feedback</option>
            </select>

            <button onclick="applyLogFilters()">Apply Filters</button>
        </div>
        
        <div id="aggregate-info">
            <p>Total Tokens: {{ total_tokens }}</p>
            <p>Total Cost: ${{ total_cost }}</p>
        </div>

        <ul id="log-files">
            {% for file in log_files %}
                <li>
                    <a href="{{ url_for('maeser.display_log', branch=file['branch'], filename=file['name']) }}">{{file['user']}}:{{ file['name'] }}</a>
                    (Created: {{ file['created'] | datetimeformat }}, Modified: {{ file['modified'] | datetimeformat }}, Feedback: {{ file['has_feedback'] }})
                </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}

    <script>
        // Function to apply log filters
        function applyLogFilters() {
            const sortBy = document.getElementById('log-sort-by').value;
            const order = document.getElementById('log-order').value;
            const branchFilter = document.getElementById('log-branch-filter').value;
            const userFilter = document.getElementById('log-user-filter').value;
            const feedbackFilter = document.getElementById('log-feedback-filter').value;
            const params = new URLSearchParams();

            if (sortBy) params.append('sort_by', sortBy);
            if (order) params.append('order', order);
            if (branchFilter) params.append('branch', branchFilter);
            if (userFilter) params.append('user', userFilter);
            if (feedbackFilter) params.append('feedback', feedbackFilter);

            window.location.href = `/logs?${params.toString()}`;
        }

        // Function to apply test filters
        function applyTestFilters() {
            const sortBy = document.getElementById('test-sort-by').value;
            const order = document.getElementById('test-order').value;
            const params = new URLSearchParams();

            if (sortBy) params.append('sort_by', sortBy);
            if (order) params.append('order', order);

            window.location.href = `/tests?${params.toString()}`;
        }
    </script>
</body>
</html>
