{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container py-1">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card shadow-lg">
        <div class="card-body">
          <h1 class="h3 mb-3">Upload assessment data</h1>
          <p class="text-muted">Upload a CSV or Excel file to create or update users, assessments, questions, and answer options.</p>

          <form method="post" enctype="multipart/form-data" class="mt-4">
            {% csrf_token %}
            {{ form|crispy }}
            <div class="d-flex flex-wrap gap-2 mt-4">
              <button type="submit" class="btn btn-primary">Upload</button>
              <a href="{% url 'cbt:admin_download_template' 'users' 'csv' %}" class="btn btn-outline-secondary">Download users CSV template</a>
              <a href="{% url 'cbt:admin_download_template' 'questions' 'csv' %}" class="btn btn-outline-secondary">Download questions CSV template</a>
              <a href="{% url 'cbt:admin_download_template' 'questions' 'xlsx' %}" class="btn btn-outline-secondary">Download questions Excel template</a>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-body">
          <h2 class="h5 mb-3">Instructions</h2>
          <p class="text-muted">Please ensure that your CSV or Excel file follows the correct format. You can download the templates above for reference.</p>
          <ul class="list-unstyled">
            <li><strong>Users:</strong> Include form_number, first_name, last_name, and email. The username is generated from the last name, first name, and final form-number segment. The full form number is the initial password.</li>
            <li><strong>Questions:</strong> Include columns for question text, subject, and answer options.</li>
          </ul>
        </div>
      </div>
      <div class="table-responsive">
        <p>Available subjects and IDs:</p>
        <table class="table table-bordered mt-1 table-hover table-striped">
          <thead>
            <tr>
              <th>Subject Number</th>
              <th>name</th>
            </tr>
          </thead>
          <tbody>
            {% for subject in subjects %}
            <tr>
              <td>{{ subject.id }}</td>
              <td>{{ subject.name }}</td>
            </tr>
            {% endfor %}
            
          </tbody>
        </table>
        <a href="{% url 'cbt:manage_subject_type' %}" class="btn btn-primary">Manage Subjects</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}