{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto py-8 max-w-4xl">
  <div class="mb-6">
    <h1 class="text-2xl font-bold">{{ quiz.title }}</h1>
    {% if quiz.description %}
    <p class="text-gray-600 mt-2">{{ quiz.description }}</p>
    {% endif %}
    <div class="flex items-center gap-4 mt-4">
      <span class="badge badge-outline">{{ quiz.quiz_type.upper() }}</span>
      <span class="text-sm text-gray-500">{{ questions|length }} questions</span>
    </div>
  </div>

  <form method="POST" action="{{ url_for('student.submit_quiz', quiz_id=quiz.id) }}" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    {% for question in questions %}
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <h3 class="card-title text-lg">
          Question {{ loop.index }}
          <span class="badge badge-ghost ml-2">{{ question.question_type.upper() }}</span>
        </h3>

        <p class="mb-4">{{ question.question_text }}</p>

        {% if question.question_type == 'mcq' %}
        <div class="space-y-2">
          {% for option in question.get_options() %}
          <label class="flex items-center space-x-3 cursor-pointer">
            <input type="radio" name="question_{{ question.id }}" value="{{ option }}"
                   class="radio radio-primary" required>
            <span>{{ option }}</span>
          </label>
          {% endfor %}
        </div>
        {% elif question.question_type == 'qa' %}
        <div class="form-control">
          <textarea name="question_{{ question.id }}" class="textarea textarea-bordered w-full"
                    rows="3" placeholder="Enter your answer here..." required></textarea>
        </div>
        {% endif %}
      </div>
    </div>
    {% endfor %}

    <div class="flex justify-center mt-8">
      <button type="submit" class="btn btn-primary btn-lg">
        Submit Quiz
      </button>
    </div>
  </form>
</div>
{% endblock %}