<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bluebook</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/book.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>

<body>
<p><a href="{{url_for('root')}}"><img src="{{ url_for('static', filename='images/book.svg') }}" width="100" height="120"></a></p>
<h1>Blue Book</h1>
<p>Instantly generate multiple-choice questions to sharpen your CompTIA Security+ skills - just at the press of a button!</p>
{% if session['TOKEN_PRESENT'] %}
{% endif %}
<div class="control-panel">
    <form class="control-panel-form" action="{{url_for('generate')}}" method="POST">
        <label for="num_of_questions">Number of questions:</label>
        <select name="num_of_questions" id="num_of_questions">
            <option value="{{session['latest_num']}}">{{session['latest_num']}}</option>
            {% if session['latest_num'] != "2"%}<option value="2">2</option>{%endif%}
            {% if session['latest_num'] != "5"%}<option value="5">5</option>{%endif%}
            {% if session['latest_num'] != "10"%}<option value="10">10</option>{%endif%}
            {% if session['latest_num'] != "20"%}<option value="20">20</option>{%endif%}
        </select>
        <label for="additional_request" style="padding-top: 10px;">Topic to focus on (90 characters max):</label>
        {% if saved_topics['size'] %}
            <select name="additional_request_preset" id="additional_request_preset">
                <option value="">using textbox below</option>
                {% for topic in saved_topics['requests'] %}
                    <option value="{{topic['request']}}">{{topic['request']}}</option>
                {% endfor %}
            </select>
        {% endif %}
        <input type="text" name="additional_request" id="additional_request">
        <input type="submit" value="Generate" style="margin-top: 10px;" class="subtle-blue-btn">
    </form>
        <div class="control-panel-row">
            {% if session['TOKEN_PRESENT'] %}
                <form class="control-button-form" action="{{url_for('clear_token')}}" method="POST">
                    <input type="submit" value="Clear Token" class="subtle-blue-btn">
                </form>
            {% endif %}
            {% if session['submitted'] %}
                <form class="control-button-form" action="{{url_for('wipe_questions')}}" method="POST">
                    <input type="submit" value="Wipe Questions" class="subtle-blue-btn">
                </form>
            {% endif %}
            {% if session['additional_request']['set'] and not session['additional_request']['saved']%}
                <form class="control-button-form" action="{{url_for('save_the_topic')}}" method="POST">
                    <input type="hidden" id="topic" name="topic" value="{{session['additional_request']['value']}}">
                    <input type="submit" value="Save Topic" class="subtle-blue-btn">
                </form>
            {% elif session['additional_request']['set'] and session['additional_request']['saved']%}
                <form class="control-button-form" action="{{url_for('remove_saved_topic')}}" method="POST">
                    <input type="hidden" id="topic" name="topic" value="{{session['additional_request']['value']}}">
                    <input type="submit" value="Remove saved topic" class="subtle-blue-btn">
                </form>
            {% endif %}
        </div>
</div>
{% block content %}
{% endblock content %}
</body>