{% extends "base.html" %}
{% from "_macros.html" import pagination %}

{% block title %}{{ network_name }} - Nodes{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Nodes</h1>
    <span class="badge badge-lg">{{ total }} total</span>
</div>

{% if api_error %}
<div class="alert alert-warning mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Could not fetch data from API: {{ api_error }}</span>
</div>
{% endif %}

<!-- Filters -->
<div class="card bg-base-100 shadow mb-6">
    <div class="card-body py-4">
        <form method="GET" action="/nodes" class="flex gap-4 flex-wrap items-end">
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Search</span>
                </label>
                <input type="text" name="search" value="{{ search }}" placeholder="Search by name, ID, or public key..." class="input input-bordered input-sm w-80" />
            </div>
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Type</span>
                </label>
                <select name="adv_type" class="select select-bordered select-sm">
                    <option value="">All Types</option>
                    <option value="chat" {% if adv_type == 'chat' %}selected{% endif %}>Chat</option>
                    <option value="repeater" {% if adv_type == 'repeater' %}selected{% endif %}>Repeater</option>
                    <option value="room" {% if adv_type == 'room' %}selected{% endif %}>Room</option>
                </select>
            </div>
            {% if members %}
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Member</span>
                </label>
                <select name="member_id" class="select select-bordered select-sm">
                    <option value="">All Members</option>
                    {% for member in members %}
                    <option value="{{ member.member_id }}" {% if member_id == member.member_id %}selected{% endif %}>{{ member.name }}{% if member.callsign %} ({{ member.callsign }}){% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}
            <div class="flex gap-2 w-full sm:w-auto">
                <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                <a href="/nodes" class="btn btn-ghost btn-sm">Clear</a>
            </div>
        </form>
    </div>
</div>

<!-- Nodes List - Mobile Card View -->
<div class="lg:hidden space-y-3">
    {% for node in nodes %}
    {% set ns = namespace(tag_name=none) %}
    {% for tag in node.tags or [] %}
        {% if tag.key == 'name' %}
            {% set ns.tag_name = tag.value %}
        {% endif %}
    {% endfor %}
    <a href="/nodes/{{ node.public_key }}" class="card bg-base-100 shadow-sm block">
        <div class="card-body p-3">
            <div class="flex items-center justify-between gap-2">
                <div class="flex items-center gap-2 min-w-0">
                    <span class="text-lg flex-shrink-0" title="{{ node.adv_type or 'Unknown' }}">{% if node.adv_type and node.adv_type|lower == 'chat' %}💬{% elif node.adv_type and node.adv_type|lower == 'repeater' %}📡{% elif node.adv_type and node.adv_type|lower == 'room' %}🪧{% else %}📍{% endif %}</span>
                    <div class="min-w-0">
                        {% if ns.tag_name or node.name %}
                        <div class="font-medium text-sm truncate">{{ ns.tag_name or node.name }}</div>
                        <div class="text-xs font-mono opacity-60 truncate">{{ node.public_key[:16] }}...</div>
                        {% else %}
                        <div class="font-mono text-sm truncate">{{ node.public_key[:16] }}...</div>
                        {% endif %}
                    </div>
                </div>
                <div class="text-right flex-shrink-0">
                    <div class="text-xs opacity-60">
                        {% if node.last_seen %}
                        {{ node.last_seen[:10] }}
                        {% else %}
                        -
                        {% endif %}
                    </div>
                    {% if node.tags %}
                    <div class="flex gap-1 justify-end mt-1">
                        {% for tag in node.tags[:2] %}
                        <span class="badge badge-ghost badge-xs">{{ tag.key }}</span>
                        {% endfor %}
                        {% if node.tags|length > 2 %}
                        <span class="badge badge-ghost badge-xs">+{{ node.tags|length - 2 }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </a>
    {% else %}
    <div class="text-center py-8 opacity-70">No nodes found.</div>
    {% endfor %}
</div>

<!-- Nodes Table - Desktop View -->
<div class="hidden lg:block overflow-x-auto bg-base-100 rounded-box shadow">
    <table class="table table-zebra">
        <thead>
            <tr>
                <th>Node</th>
                <th>Last Seen</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody>
            {% for node in nodes %}
            {% set ns = namespace(tag_name=none) %}
            {% for tag in node.tags or [] %}
                {% if tag.key == 'name' %}
                    {% set ns.tag_name = tag.value %}
                {% endif %}
            {% endfor %}
            <tr class="hover">
                <td>
                    <a href="/nodes/{{ node.public_key }}" class="link link-hover flex items-center gap-2">
                        <span class="text-lg" title="{{ node.adv_type or 'Unknown' }}">{% if node.adv_type and node.adv_type|lower == 'chat' %}💬{% elif node.adv_type and node.adv_type|lower == 'repeater' %}📡{% elif node.adv_type and node.adv_type|lower == 'room' %}🪧{% else %}📍{% endif %}</span>
                        <div>
                            {% if ns.tag_name or node.name %}
                            <div class="font-medium">{{ ns.tag_name or node.name }}</div>
                            <div class="text-xs font-mono opacity-70">{{ node.public_key[:16] }}...</div>
                            {% else %}
                            <span class="font-mono text-sm">{{ node.public_key[:16] }}...</span>
                            {% endif %}
                        </div>
                    </a>
                </td>
                <td class="text-sm whitespace-nowrap">
                    {% if node.last_seen %}
                    {{ node.last_seen[:19].replace('T', ' ') }}
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td>
                    {% if node.tags %}
                    <div class="flex gap-1 flex-wrap">
                        {% for tag in node.tags[:3] %}
                        <span class="badge badge-ghost badge-xs">{{ tag.key }}</span>
                        {% endfor %}
                        {% if node.tags|length > 3 %}
                        <span class="badge badge-ghost badge-xs">+{{ node.tags|length - 3 }}</span>
                        {% endif %}
                    </div>
                    {% else %}
                    <span class="opacity-50">-</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="3" class="text-center py-8 opacity-70">No nodes found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{{ pagination(page, total_pages, {"search": search, "adv_type": adv_type, "member_id": member_id, "limit": limit}) }}
{% endblock %}