{% extends "base.html" %}

{% block content %}
<style>
    .form-group {
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .btn {
        background: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    .btn:hover {
        background: #45a049;
    }
</style>

<h1>Create New Quiz</h1>

<form method="post">
    {% csrf_token %}

    <div class="form-group">
        <label for="{{ form.course.id_for_label }}">Course:</label>
        {{ form.course }}
    </div>

    <div class="form-group">
        <label for="{{ form.tags.id_for_label }}">Tags:</label>
        {{ form.tags }}
        <small style="color: grey; display: block; margin-top: 5px;">Hold Ctrl (or Cmd) to select multiple tags.</small>
    </div>

    <div class="form-group">
        <label for="{{ form.question_type.id_for_label }}">Question Type:</label>
        {{ form.question_type }}
        <small style="color: grey; display: block; margin-top: 5px;">Hold Ctrl (or Cmd) to select multiple
            types.</small>
    </div>

    <button type="submit" class="btn">Start Quiz</button>
</form>

<p><a href="{% url 'quiz:index' %}">Back to Dashboard</a></p>
{% endblock %}