{% extends "student/student_layout.html" %}
{% block student_content %}

<br>
<div class="position-relative">
  <div class="position-absolute top-50 start-0 translate-middle-y">
    <h3>All Exams</h3>
  </div>
  <a type="button" href="{{ url_for('join_exam') }}"
    class="btn btn-primary position-absolute top-50 end-0 translate-middle-y" data-bs-toggle="modal"
    data-bs-target="#joinexam">Join Exam</a>
  <div class="modal fade" id="joinexam" tabindex="-1" aria-labelledby="joinexamLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="joinexamLabel">Join an Exam</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form class="form-group" action="{{url_for('get_exam_by_code')}}" method="post">
            <div class="form-floating">
              <input type="text" class="shadow form-control has-validation" name="exam_code"
                placeholder="Enter Exam Code" id="exam_code" required>
              <label for="exam_code">Enter Exam Code</label>
            </div>
            <div class="invalid-tooltip">
              Please enter valid code.
            </div>
            <br>
            <button type="submit" onclick="return myFunction()" class="btn btn-primary">Join Exam</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<br><br>
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col" style="width: 39%">Exam</th>
        <th scope="col" style="width: 32%">Subject</th>
        <th scope="col" style="width: 13%">End Date</th>
        <th scope="col">Duration</th>
        <th scope="col">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {% for row in exams %}
      <tr>
        <td>{{row[1]}}&nbsp;&nbsp;
          {% if row[7] >= today %}
          <span class="badge rounded-pill bg-success">Live</span>
          {% else %}
          <span class="badge rounded-pill bg-danger">Ended</span>
          {% endif %}
        </td>
        {% for sub in subjects %}
        {% if sub[0] == row[9] %}
        <td>{{sub[1]}}</td>
        {% else %}
        {% endif %}
        {% endfor %}
        <td>{{row[7]}}</td>
        <td>{{row[3]}}</td>
        <td>
          <center>
            {% if row[7] >= today %}
              <a href="{{ url_for('get_exam',exam_code=row[0]) }}" onclick="return myFunction()" type="button" class="btn btn-outline-success">Start</a>
            {% else %}
              <a href="{{ url_for('get_exam',exam_code=row[0]) }}" onclick="return myFunction()" type="button" class="disabled btn btn-outline-success">Start</a>
            {% endif %}
          </center>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  function myFunction() {
    if (confirm("Start the Exam?")) {
    }
    else {
      return false;
    }
  }

</script>
{% endblock %}