{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Questions</h1>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{% url 'cbt:admin_upload_data' %}">Upload data</a>
      <a class="btn btn-primary" href="{% url 'cbt:admin_question_create' %}">New Question</a>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body">
      <table id="questions-table" class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Assessment</th>
            <th>Prompt</th>
            <th>Type</th>
            <th>Marks</th>
            <th>Order</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for q in questions %}
          <tr>
            <td>{{ q.pk }}</td>
            <td>{{ q.assessment.title }}</td>
            <td>{{ q.prompt|truncatechars:80 }}</td>
            <td>{{ q.get_question_type_display }}</td>
            <td>{{ q.marks }}</td>
            <td>{{ q.order }}</td>
            <td>
              <a class="btn btn-sm btn-outline-primary" href="#" hx-get="{% url 'cbt:admin_question_edit' q.pk %}" hx-target="#modal-body" hx-swap="innerHTML">Edit</a>
              <a class="btn btn-sm btn-outline-danger" href="#" hx-get="{% url 'cbt:admin_question_delete' q.pk %}" hx-target="#modal-body" hx-swap="innerHTML">Delete</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<!-- Modal used by HTMX -->
<div class="modal fade" id="htmxModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div id="modal-body"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function(){
    $('#questions-table').DataTable();
  });
</script>
<script src="https://unpkg.com/htmx.org@1.10.0"></script>
<script>
  document.body.addEventListener('htmx:afterSwap', function(evt){
    // show bootstrap modal when content loaded into modal-body
    if(evt.detail.target && evt.detail.target.id === 'modal-body'){
      var modalEl = document.getElementById('htmxModal');
      var modal = new bootstrap.Modal(modalEl);
      modal.show();
    }
  });

  // when server triggers this event, reload the page to refresh DataTable
  document.body.addEventListener('questionsChanged', function(){
    location.reload();
  });
</script>
{% endblock %}