{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/quiz.css') }}">
{% endblock %}
{% block content %}
<div class="quiz-form-page">
    <a href="/quizzes" class="back-link">&larr; Back to Quizzes</a>
    <h1>New quiz</h1>
    <p class="quiz-form-intro">Create the quiz first, then add its questions in the builder. Nothing is public until you publish it.</p>

    <form method="POST" action="/quizzes/create" class="quiz-form">
        <label class="quiz-field">
            <span class="quiz-field-label">Title</span>
            <input type="text" name="title" required minlength="3" maxlength="200" placeholder="SQLite fundamentals">
        </label>

        <label class="quiz-field">
            <span class="quiz-field-label">Description</span>
            <textarea name="description" rows="4" maxlength="5000" placeholder="What this quiz covers. Markdown is supported."></textarea>
        </label>

        {% include "_quiz_settings_fields.html" %}

        <div class="quiz-form-actions">
            <button type="submit" class="btn btn-primary">Create draft</button>
            <a href="/quizzes" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}