<!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>
<div>
    <form action="{{url_for('generate')}}">
        <label for="num_of_questions">Number of questions:</label>
        <select name="num_of_questions" id="num_of_questions">
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="20">20</option>
        </select>
        <label for="additional_request" style="padding-top: 10px;">Topic to focus on (30 characters max):</label>
        <input type="text" name="additional_request" id="additional_request">
        <input type="submit" value="Generate" style="margin-top: 10px;">
    </form>
</div>
{% block content %}
{% endblock content %}
</body>