{% extends "layouts/default.html" %}
{% block title %}Category Tree{% endblock %}
{% block content %}
<form name="category-form" id="category-form">
  {{ token | safe }}
</form>

{% include "category/category-menu-bar.html" %}

<div class="content">
  <div class="field">
    <div class="control">
      <div class="select">
        <select id="category-select" name="category-select"
                onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
          <option value="">Category</option>
          {% for category in categories %}
          <option value="/category/{{ category.id }}/view"{% if category.id == id %} selected{% endif %}>{{ category.name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  {% if category.id %}
  <h2>Decks</h2>
  <div class="container"
       hx-get="/decks/by-category/{{ category.id }}"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <h2>Children</h2>
  <div class="container" id="child-results">
    {% include "category/child-list.html" %}
  </div>
  {% endif %}

  <hr>

  <div class="container" id="child-form">
    {% include "category/child-form.html" %}
  </div>

  <i class="fa-solid fa-spinner fa-spin htmx-indicator w3-padding" id="i-spinner"></i>

<p><a href="/category/explain">Explain all this to me..</a></p>
</div>
{% endblock %}