{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}Taxonomy Graph{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
  &rsaquo; {% trans 'Taxonomy Graph' %}
</div>
{% endblock %}

{% block content %}
<h1>Taxonomy Graph</h1>

<style>
  #taxomesh-graph {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.75;
  }
  .taxomesh-entry {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 2px 0;
    padding-left: calc(var(--depth, 0) * 2.6rem);
  }
  .taxomesh-entry[data-kind="item"] {
    color: #9aa6b4;
  }
  .taxomesh-entry[data-kind="category"] .taxomesh-label {
    font-weight: 700;
  }
  .taxomesh-label a {
    text-decoration: none;
    color: inherit;
  }
  .taxomesh-label a:hover {
    text-decoration: underline;
  }
</style>

{% if error %}
  <p class="errornote">{{ error }}</p>
{% elif not has_entries %}
  <p>No categories found. Add one to get started.</p>
{% else %}
  <div id="taxomesh-graph">
    {% for entry in entries %}
      <div
        class="taxomesh-entry"
        data-kind="{{ entry.kind }}"
        style="--depth: {{ entry.depth }};"
      >
        {% if entry.enabled %}
          <span style="color: #28a745;" title="enabled">&#10003;</span>
        {% else %}
          <span style="color: #dc3545;" title="disabled">&#10007;</span>
        {% endif %}

        {% if entry.kind == "category" %}
          <span class="taxomesh-label">
            <a href="{% url 'admin:taxomesh_contrib_django_categorymodel_change' entry.uuid %}">{{ entry.name }}</a>
          </span>
        {% else %}
          <span class="taxomesh-label">
            <a href="{% url 'admin:taxomesh_contrib_django_itemmodel_change' entry.uuid %}">{{ entry.name }}</a>
          </span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}
{% endblock %}