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

<div class="container mt-4">

<div class="row g-3">

  <!-- GENERAL SUMMARY -->
  <div class="col-md-4">
    <div class="card text-white bg-gradient-primary shadow">
      <div class="card-body text-center">
        <i class="fas fa-chart-pie fa-3x mb-2"></i>
        <h5>General Summary</h5>
        <a href="{% url 'exams:general_summary_page' project.id %}"
           class="btn btn-light btn-sm mt-2">Open</a>
      </div>
    </div>
  </div>

  <!-- SCHOOL RANKING -->
  <div class="col-md-4">
    <div class="card text-white bg-gradient-success shadow">
      <div class="card-body text-center">
        <i class="fas fa-sort-amount-up fa-3x mb-2"></i>
        <h5>School Ranking</h5>
        <button class="btn btn-light btn-sm mt-2"
                data-bs-toggle="modal"
                data-bs-target="#schoolRankModal">
          Configure
        </button>
      </div>
    </div>
  </div>

  <!-- SCHOOL RESULTS -->
  <div class="col-md-4">
    <div class="card text-white bg-gradient-warning shadow">
      <div class="card-body text-center">
        <i class="fas fa-school fa-3x mb-2"></i>
        <h5>School Results</h5>
        <a href="{% url 'exams:project_school_results_list' project.id %}"
           class="btn btn-light btn-sm mt-2">Open</a>
      </div>
    </div>
  </div>

</div>
</div>







<div class="modal fade" id="schoolRankModal">
  <div class="modal-dialog modal-lg">
    <form method="get" action="{% url 'exams:project_school_rank_router' project.id %}">
      <div class="modal-content">

        <div class="modal-header bg-success text-white">
          <h5>School Ranking Options</h5>
        </div>

        <div class="modal-body row g-3">

          <!-- CATEGORY -->
          <div class="col-md-6">
            <label>Category</label>
            <select name="category" class="form-select">
              <option value="all">All Schools</option>
              <option value="above_40">≥ 40 Candidates</option>
              <option value="below_40">&lt; 40 Candidates</option>
            </select>
          </div>

          <!-- RANK TYPE -->
          <div class="col-md-6">
            <label>Ranking Scope</label>
            <select name="scope" class="form-select">
              <option value="overall">Overall</option>
              <option value="region">Region-wise</option>
              <option value="district">District-wise</option>
            </select>
          </div>

          <!-- OUTPUT -->
          <div class="col-md-6">
            <label>Layout</label>
            <select name="layout" class="form-select">
              <option value="normal">Normal</option>
              <option value="extended">Extended</option>
            </select>
          </div>

          <!-- FORMAT -->
          <div class="col-md-6">
            <label>Download</label>
            <select name="format" class="form-select">
              <option value="html">View</option>
              <option value="pdf">PDF</option>
              <option value="excel">Excel</option>
            </select>
          </div>

        </div>

        <div class="modal-footer">
          <button class="btn btn-success">Generate</button>
        </div>

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




{% endblock %}