{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <h1 class="h3 mb-4">Answers</h1>
  <div class="card shadow-sm">
    <div class="card-body">
      <form method="get" class="row g-3 mb-3">
        <div class="col-auto">
          <input type="text" name="q" value="{{ search }}" class="form-control" placeholder="Search answers..." />
        </div>
        <div class="col-auto">
          <button class="btn btn-outline-primary">Filter</button>
        </div>
      </form>
      {% include 'cbt/admin/_answers_table.html' %}
    </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(){ $('#answers-table').DataTable(); });
</script>
<script src="https://unpkg.com/htmx.org@1.10.0"></script>
<script>
  document.body.addEventListener('htmx:afterSwap', function(evt){
    if(evt.detail.target && evt.detail.target.id === 'modal-body'){
      var modalEl = document.getElementById('htmxModal');
      var modal = new bootstrap.Modal(modalEl);
      modal.show();
    }
  });

  document.body.addEventListener('answersChanged', function(){
    location.reload();
  });
</script>
{% endblock %}