<!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 }} — Training</h2>
        </div>
    </header>
    
    <main>
        <form action="{{ url_for('maeser.submit_train') }}" method="POST" class="standalone-form" id="train">
            <h2>Help Train {{ app_name }}</h2>
            <p>
                Help us improve {{ app_name }} by providing an example question and answer.
            </p>
            <p>
                These examples will be used to train the chatbot to provide better responses.
            </p>
            <p>
                Please ensure the quality of the examples you provide.
            </p>
            <p>
                Providing poor examples may result in the chatbot providing incorrect or low quality answers.
            </p>
                <label for="name">Name <span id="required">*</span></label>
            <input type="text" id="name" name="name" required>
            <label for="role">Role <span id="required">*</span></label>
            <select id="role" name="role" required>
            {% for option in role_options %}
                <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
            </select>
            <label for="type">Type <span id="required">*</span></label>
            <p class="field-description">If you want to change <em>what</em> information the chatbot responds with, choose <b>information</b>.</p>
            <p class="field-description">If you want to change <em>how</em> the chatbot responds, choose <b>style</b>.</p>
            <select id="type" name="type" required>
                {% for option in type_options %}
                    <option value="{{ option }}">{{ option }}</option>
                {% endfor %}
            </select>
            <label for="question">Question <span id="required">*</span></label>
            <textarea id="question" name="question" required style="min-height: 10rem;"></textarea>
            <label for="answer">Answer <span id="required">*</span></label>
            <textarea id="answer" name="answer" required style="min-height: 15rem;"></textarea>
            <div class="button-container">
            <button type="submit">Submit</button>
            <button onclick="goBack()" class="negative-button">Cancel</button>
            </div>
        </form>
        </form>
    </main>
    <script src="{{ url_for('maeser.static', filename='feedback.js') }}"></script>
</body>
</html>