{% extends 'base.html' %}

{% macro category_icon(category_name) %}
  {% set category = (category_name or '')|lower %}
  <span class="tree-category-icon" title="{{ category_name }}" aria-label="{{ category_name }}">
  {% if 'server' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="3" width="16" height="5" rx="1"/><rect x="4" y="10" width="16" height="5" rx="1"/><rect x="4" y="17" width="16" height="4" rx="1"/><circle cx="7" cy="5.5" r=".8"/><circle cx="7" cy="12.5" r=".8"/><circle cx="7" cy="19" r=".8"/></svg>
  {% elif 'netz' in category or 'switch' in category or 'router' in category or 'firewall' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 11h2m2 0h2m2 0h2M6 14h12"/></svg>
  {% elif 'druck' in category or 'printer' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8V3h10v5M6 17H4V9h16v8h-2M7 14h10v7H7z"/><circle cx="17" cy="11" r=".8"/></svg>
  {% elif 'monitor' in category or 'display' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M8 21h8M12 16v5"/></svg>
  {% elif 'mobil' in category or 'telefon' in category or 'smartphone' in category or 'tablet' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M10 5h4M11 19h2"/></svg>
  {% elif 'computer' in category or 'pc' in category or 'notebook' in category or 'laptop' in category %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M7 21h10M12 16v5"/></svg>
  {% else %}
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l8 4v12l-8 4-8-4V6zM4 6l8 4 8-4M12 10v12"/></svg>
  {% endif %}
  </span>
{% endmacro %}

{% macro render_node(node, by_parent) %}
<li class="tree-item">
  <article class="tree-card">
    {{ category_icon(node.category.name) }}
    <div class="tree-card-body">
      <a class="tree-name" href="/assets/{{ node.id }}" title="{{ node.name }}">{{ node.name }}</a>
      <div class="tree-meta">{{ node.ip_address or t('assets.no_ip') }}</div>
      <div class="tree-meta">{{ node.location or t('assets.no_location') }}{% if node.room_number %} · {{ t('assets.room') }} {{ node.room_number }}{% endif %}</div>
      <div class="tree-category">{{ node.category.name }}</div>
    </div>
  </article>
  {% set children = by_parent.get(node.id, []) %}
  {% if children %}<ul>{% for child in children %}{{ render_node(child, by_parent) }}{% endfor %}</ul>{% endif %}
</li>
{% endmacro %}

{% block content %}
<div class="toolbar"><h1>{{ t('app.asset_tree') }}</h1></div>
<form class="tree-filters panel" method="get" action="/asset-tree">
  <div class="tree-filter-controls">
    <label class="tree-filter-field">{{ t('tree.root_node') }}
      <select name="root_id">
        <option value="">{{ t('tree.all_root_assets') }}</option>
        {% for asset in all_roots %}<option value="{{ asset.id }}" {% if selected_root_id == asset.id %}selected{% endif %}>{{ asset.name }}</option>{% endfor %}
      </select>
    </label>

    <label class="tree-filter-field">{{ t('tree.name_contains') }}
      <input name="name_filter" value="{{ name_filter }}" placeholder="z. B. Dell">
    </label>

    <label class="tree-toggle-option">
      <input type="checkbox" name="hide_without_parent" value="1" {% if hide_without_parent %}checked{% endif %}>
      <span class="tree-toggle-track" aria-hidden="true"><span class="tree-toggle-thumb"></span></span>
      <span class="tree-toggle-text">{{ t('tree.hide_standalone') }}</span>
    </label>

    <div class="tree-filter-actions">
      <button class="button" type="submit">{{ t('common.filter') }}</button>
      <a class="button button-secondary" href="/asset-tree">{{ t('common.reset') }}</a>
    </div>
  </div>

  <fieldset class="tree-category-filter">
    <legend>{{ t('app.categories') }}</legend>
    <div class="tree-category-options">
      {% for category in categories %}
      <label class="tree-category-option">
        <input type="checkbox" name="category_id" value="{{ category.id }}" {% if category.id in selected_category_ids %}checked{% endif %}>
        <span class="tree-category-check" aria-hidden="true"></span>
        <span class="tree-category-name">{{ category.name }}</span>
      </label>
      {% endfor %}
    </div>
    <small>{{ t('tree.no_category_selection') }}</small>
  </fieldset>
</form>
{% if roots %}<div class="tree-scroll"><ul class="asset-tree">{% for root in roots %}{{ render_node(root, by_parent) }}{% endfor %}</ul></div>{% else %}<p class="notice">{{ t('tree.no_matches') }}</p>{% endif %}
{% endblock %}