{% extends "base.html" %}
{% block content %}
  <h1 class="mb-4">Marking: Exams you can mark</h1>

  <style>
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator { display: inline-block; }
  </style>

  <div class="row">
    <div class="col-12">
      <p class="text-muted">Click an exam type to load exams — each section loads independently.</p>
    </div>
  </div>

  <div class="row g-4">
    {% for app in apps %}
      <div class="col-md-6">
        <div class="card">
          <div class="card-body d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">{{ app|capfirst }}</h5>
            <div>
              <button class="btn btn-sm btn-primary" hx-get="{% url 'user_marking_partial' app %}" hx-target="#marking-{{ app }}" hx-swap="innerHTML" hx-indicator="#indicator-{{ app }}">Load / Refresh</button>
              <div id="indicator-{{ app }}" class="htmx-indicator ms-2 spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
            </div>
          </div>
          <div id="marking-{{ app }}" class="card-body border-top">
            <div class="text-muted small">No data loaded — click the button to load.</div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <script>
  // Show/hide indicators referenced by triggering element's hx-indicator attribute
    document.body.addEventListener('htmx:beforeRequest', function(evt){
      try{
        var elt = evt.detail.elt || evt.target;
        var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
        if(sel){
          var indicator = document.querySelector(sel);
          if(indicator) indicator.classList.add('visible');
        }
      }catch(e){console.warn(e)}
    });

    document.body.addEventListener('htmx:afterRequest', function(evt){
      try{
        var elt = evt.detail.elt || evt.target;
        var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
        if(sel){
          var indicator = document.querySelector(sel);
          if(indicator) indicator.classList.remove('visible');
        }
      }catch(e){console.warn(e)}
    });
  </script>

  <style>
    .htmx-indicator { display: none; }
    .htmx-indicator.visible { display: inline-block !important; }
  </style>

{% endblock %}