{% extends "base.html" %}

{% macro status_badge(status) -%}
  {% if status == "online" %}
    <span class="badge text-bg-success">Online</span>
  {% elif status == "missing-dependency" %}
    <span class="badge text-bg-warning">Missing dependency</span>
  {% elif status == "type-unavailable" %}
    <span class="badge text-bg-secondary">Type unavailable</span>
  {% else %}
    <span class="badge text-bg-danger">Offline</span>
  {% endif %}
{%- endmacro %}

{% macro render_device_node(device_id) -%}
  <li class="mb-2">
    <div class="d-flex justify-content-between align-items-start gap-3">
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <a href="{{ url_for('bussdcc_system_devices.show', id=device_id) }}" class="fw-semibold text-decoration-none">
          {{ device_id }}
        </a>
        <span class="badge rounded-pill text-bg-light border">{{ devices[device_id].type }}</span>
        {{ status_badge(status_map[device_id]) }}
      </div>

      {% set deps = dependency_map.get(device_id, []) %}
      {% set missing = missing_dependency_map.get(device_id, []) %}

      {% if missing %}
        <div class="small text-warning mt-1">
          Missing:
          {% for dep in missing|sort %}
            <code>{{ dep }}</code>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </div>

    {% set children = dependent_map.get(device_id, []) %}
    {% if children %}
      <ul class="mt-2 ms-4 ps-3 border-start">
        {% for child_id in children %}
          {{ render_device_node(child_id) }}
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{%- endmacro %}

{% block content %}
<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1 class="h3 mb-0">Devices</h1>
      <a href="{{ url_for('bussdcc_system_devices.new') }}" class="btn btn-primary">Add Device</a>
    </div>

    {% if roots %}
      <ul class="list-unstyled">
        {% for device_id in roots %}
          {{ render_device_node(device_id) }}
        {% endfor %}
      </ul>
    {% else %}
      <div class="alert alert-light border mb-0">
        No devices configured yet.
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}