{% extends LOWBONO_DASHBOARD_TEMPLATE_BASE|default:"lowbono/dashboard/base.html" %}
{% load django_bootstrap5 %}
{% load django_tables2 %}
{% load static %}

{% block title %}{{ page_title }} · Staff Dashboard{% endblock %}

{% comment %} tom-select's CSS and JS load from the base. {% endcomment %}

{% block content %}
  <!-- Top bar: page title -->
  <div class="mb-3">
    <h1 class="h4 mb-0">{{ page_title }}
      <span class="badge bg-secondary align-middle">{{ table.paginator.count }}</span>
    </h1>
  </div>

  <!-- Controls row: filter toggle (left) + advanced query (far right), above the filter card -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <button class="btn btn-sm btn-outline-secondary filter-toggle" type="button"
            data-bs-toggle="collapse" data-bs-target="#filterPanel"
            aria-expanded="true" aria-controls="filterPanel">
      <i class="bi bi-funnel"></i> <span class="filter-toggle-label"></span>
      <i class="bi bi-chevron-down chevron"></i>
    </button>
    {% if advanced_url %}
    <a href="{{ advanced_url }}" class="btn btn-sm btn-outline-primary">
      <i class="bi bi-diagram-3"></i> Advanced query
      <i class="bi bi-box-arrow-up-right ms-1"></i>
    </a>
    {% endif %}
  </div>

  <!-- Filter panel -->
  <div class="collapse show" id="filterPanel">
    <div class="card mb-3">
      <div class="card-body py-3">
        <form method="get" class="row g-2 align-items-end">
          {% for field in filter.form %}
            <div class="col-6 col-md-4 col-lg-3">
              {% bootstrap_field field size='sm' %}
            </div>
          {% endfor %}
          <div class="col-12 mt-2">
            <button type="submit" class="btn btn-sm btn-primary">
              <i class="bi bi-funnel"></i> Apply filters</button>
            <a href="{{ request.path }}" class="btn btn-sm btn-outline-secondary">Reset</a>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Table section header: heading + column / export controls (next to the table) -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <h2 class="h5 mb-0">{{ page_title }}
      <span class="badge bg-secondary align-middle">{{ table.paginator.count }}</span>
    </h2>
    <div class="d-flex gap-2">
      <!-- Column show/hide -->
      <div class="dropdown">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                data-bs-auto-close="outside" type="button">
          <i class="bi bi-layout-three-columns px-1"></i>View/Hide Columns
        </button>
        <div class="dropdown-menu dropdown-menu-end p-2" style="min-width: 220px;">
          {% for column in table.columns %}
            <label class="dropdown-item small mb-0">
              <input type="checkbox" class="col-toggle form-check-input me-1"
                     data-col="{{ forloop.counter }}" data-name="{{ column.name }}"
                     {% if column.name not in default_hidden %}checked{% endif %}> {{ column.header }}
            </label>
          {% endfor %}
        </div>
      </div>
      <!-- Export -->
      <div class="btn-group">
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='csv' %}">
          <i class="bi bi-filetype-csv"></i> Export CSV</a>
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='xlsx' %}">
          <i class="bi bi-file-earmark-excel"></i> Export Excel Sheet</a>
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="table-scroll-wrap">
    <div class="table-responsive">
      {% render_table table %}
    </div>
  </div>
{% endblock %}

{% block extra_js %}
{% comment %} The tom-select library loads from the base; only this initialisation
   is page-local. {% endcomment %}
<script>
  // Upgrade any .js-tomselect <select> into a searchable dropdown. The
  // remove_button plugin adds an "x" on each selected chip (multi-selects) so
  // staff can deselect without pressing backspace.
  //
  // For .js-grouped selects (Practice Areas) the <select> ships native
  // <optgroup>s labelled "<Profession> — <Category>"; keep that order
  // (lockOptgroupOrder) and bold the leading profession in each group header so
  // the Type > Category > Area hierarchy is obvious when scanning/searching.
  function boldBeforeSep(text, escape) {
    text = (text == null) ? '' : String(text);
    var i = text.indexOf(' — ');
    if (i === -1) { return escape(text); }
    return '<strong>' + escape(text.slice(0, i)) + '</strong>' + escape(text.slice(i));
  }
  document.querySelectorAll('select.js-tomselect').forEach(function (el) {
    var opts = { allowEmptyOption: true, maxOptions: null, plugins: ['remove_button'] };
    if (el.classList.contains('js-grouped')) {
      opts.lockOptgroupOrder = true;
      opts.render = {
        optgroup_header: function (data, escape) {
          return '<div class="optgroup-header">' + boldBeforeSep(data.label, escape) + '</div>';
        }
      };
    }
    new TomSelect(el, opts);
  });
</script>
{% endblock %}