{% extends "base.html" %}
{% from "_tree.html" import render_tree %}
{% block title %}Categories · Retain{% endblock %}
{% block content %}
<div class="narrow">
  <div class="page-heading"><div><p class="eyebrow">Organize</p><h1>Categories</h1></div></div>
  {% if error %}<div class="notice error">{{ error }}</div>{% endif %}
  <form class="panel form-card" method="post" action="{{ url_for('create_category') }}">
    <h2>Create a category</h2>
    <label for="name">Category path</label>
    <input id="name" name="name" required placeholder="Projects{{ delimiter }}Retain">
    <p class="hint">Use <code>{{ delimiter }}</code> between levels. The colon delimiter cannot be part of a category label.</p>
    <label for="description">Description</label>
    <textarea id="description" name="description" rows="3" placeholder="What belongs in this category?"></textarea>
    <button type="submit">Create category</button>
  </form>
  <section class="panel category-manager">
    <h2>Category tree</h2>
    {% if category_tree %}
      <div class="management-tree">{{ render_tree(category_tree, manage=true) }}</div>
    {% else %}<p class="muted">No categories created.</p>{% endif %}
  </section>
</div>
{% endblock %}