{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>
      <i class="fas fa-layer-group"></i> Subject Papers
    </h4>

    <div class="d-flex gap-2">

      <button class="btn btn-success btn-sm"
              data-bs-toggle="modal"
              data-bs-target="#bulkPaperModal">
        <i class="fas fa-file-excel"></i> Bulk Upload
      </button>

      <a href="{% url 'exams:subjectpaper_template_download' %}"
         class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-download"></i> Download Template
      </a>

    </div>
  </div>

  {% if messages %}
      {% for message in messages %}
          <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
      {% endfor %}
  {% endif %}

  <table class="table table-bordered table-striped">
    <thead class="table-dark">
      <tr>
        <th>Subject Code</th>
        <th>Paper Code</th>
        <th>Paper Name</th>
        <th>Max Marks</th>
        <th width="120">Actions</th>
      </tr>
    </thead>

    <tbody>
      {% for p in papers %}
      <tr>
        <td>{{ p.subject.subject_code }}</td>
        <td>{{ p.paper_code }}</td>
        <td>{{ p.paper_name }}</td>
        <td>{{ p.max_marks }}</td>
        <td>
          <a href="#" class="btn btn-sm btn-danger">
            <i class="fas fa-trash"></i>
          </a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="5" class="text-center text-muted">
          No subject papers found
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

</div>


<!-- ================= BULK PAPER UPLOAD ================= -->
<div class="modal fade" id="bulkPaperModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <form method="POST"
            action="{% url 'exams:subjectpaper_bulk_upload' %}"
            enctype="multipart/form-data">

        {% csrf_token %}

        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">
            <i class="fas fa-upload"></i> Bulk Subject Paper Upload
          </h5>
          <button class="btn-close btn-close-white"
                  data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">

          <p class="fw-bold">Excel columns required:</p>
          <pre class="bg-light p-2 small">
subject_code | paper_code | paper_name | max_marks
          </pre>

          <input type="file"
                 name="excel_file"
                 accept=".xlsx"
                 class="form-control"
                 required>
        </div>

        <div class="modal-footer">
          <button class="btn btn-success w-100">
            <i class="fas fa-upload"></i> Upload Papers
          </button>
        </div>

      </form>

    </div>
  </div>
</div>

{% endblock %}