{% extends "base.html" %}

{% block title %}Label Categories - Admin{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1><i class="bi bi-diagram-3"></i> Part Categories</h1>
        <p class="text-muted mb-0">
            Seeded from standard LEGO part terminology. Rename, renumber and reshape it
            to match how your drawers actually run.
        </p>
    </div>
    <div class="col-auto">
        <a href="{{ url_for('labels.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to labels
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-7">
        <div class="card mb-3">
            <div class="card-header"><strong>Current taxonomy</strong></div>
            <div class="card-body p-0">
                <div class="accordion accordion-flush" id="categoryTree">
                {% for root in roots %}
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#cat{{ root.id }}">
                                <span class="badge rounded-pill me-2" style="background: {{ root.accent_colour() }};">&nbsp;</span>
                                <strong>{{ root.display_code }} {{ root.name }}</strong>
                                <span class="badge bg-secondary ms-2">{{ root.label_count() }} labels</span>
                            </button>
                        </h2>
                        <div id="cat{{ root.id }}" class="accordion-collapse collapse" data-bs-parent="#categoryTree">
                            <div class="accordion-body">
                                {% for category in [root] + root.children|list %}
                                <form method="POST" class="row g-2 align-items-end mb-2 pb-2 border-bottom">
                                    <input type="hidden" name="category_id" value="{{ category.id }}">
                                    <div class="col-2">
                                        <label class="form-label small mb-0">Code</label>
                                        <input type="text" name="code" class="form-control form-control-sm" value="{{ category.code or '' }}">
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label small mb-0">{{ 'Parent' if category.id == root.id else 'Name' }}</label>
                                        <input type="text" name="name" class="form-control form-control-sm" value="{{ category.name }}">
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label small mb-0">Colour</label>
                                        <input type="color" name="colour" class="form-control form-control-sm form-control-color"
                                               value="{{ category.colour or category.accent_colour() }}">
                                    </div>
                                    <div class="col-2">
                                        <label class="form-label small mb-0">Order</label>
                                        <input type="number" name="sort_order" class="form-control form-control-sm" value="{{ category.sort_order }}">
                                    </div>
                                    <div class="col-2 d-flex gap-1">
                                        <button type="submit" name="action" value="update"
                                                class="btn btn-sm btn-outline-danger" title="Save"><i class="bi bi-check-lg"></i></button>
                                        <button type="submit" name="action" value="delete"
                                                class="btn btn-sm btn-outline-secondary" title="Delete"
                                                onclick="return confirm('Delete {{ category.name }}?');">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </form>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="p-3 text-muted">No categories yet &mdash; seed them from the panel on the right.</div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card mb-3">
            <div class="card-header"><strong>Add a category</strong></div>
            <div class="card-body">
                <form method="POST" class="row g-2">
                    <input type="hidden" name="action" value="create">
                    <div class="col-4">
                        <label class="form-label small">Code</label>
                        <input type="text" name="code" class="form-control" placeholder="08.09">
                    </div>
                    <div class="col-8">
                        <label class="form-label small">Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="Shock Absorbers">
                    </div>
                    <div class="col-12">
                        <label class="form-label small">Parent</label>
                        <select name="parent_id" class="form-select">
                            <option value="">(top level)</option>
                            {% for cid, text in choices %}
                            <option value="{{ cid }}">{{ text }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label small">Colour</label>
                        <input type="color" name="colour" class="form-control form-control-color" value="#d11013">
                    </div>
                    <div class="col-6">
                        <label class="form-label small">Sort order</label>
                        <input type="number" name="sort_order" class="form-control" value="0">
                    </div>
                    <div class="col-12 d-grid mt-2">
                        <button class="btn btn-danger"><i class="bi bi-plus-lg"></i> Add category</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><strong>Seed taxonomy</strong></div>
            <div class="card-body">
                <p class="small text-muted">
                    Re-applies the shipped starter taxonomy. It only adds categories that are
                    missing &mdash; anything you've renamed, recoloured or renumbered is left alone.
                </p>
                <form method="POST">
                    <input type="hidden" name="action" value="reseed">
                    <button class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-repeat"></i> Apply seed taxonomy
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}