@extends('layouts.app')
@section('title', $device->name.' — neighbours')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $device->name }}</h1>
            <p>{{ $links->count() }} directly connected device(s) — one hop out.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('devices.show', $device) }}" class="btn secondary">Device</a>
            <a href="{{ route('links.index', ['device_id' => $device->id]) }}" class="btn secondary">All links</a>
        </div>
    </div>

    <div class="card">
        <div class="card-head"><h3>Neighbours</h3></div>
        <div class="card-body" style="padding:0;">
            @if ($links->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128279;',
                    'title' => 'No links recorded for this device',
                    'message' => 'Record its connections on the Topology page to see what it carries.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Direction</th><th>Neighbour</th><th>This port</th><th>Their port</th>
                        <th>Medium</th><th class="num">Capacity</th><th class="num">Distance</th><th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($links as $link)
                        @php
                            $isSource = $link->source_device_id === $device->id;
                            $other    = $isSource ? $link->target : $link->source;
                        @endphp
                        <tr>
                            <td><span class="badge {{ $isSource ? 'info' : 'muted' }}">
                                {{ $isSource ? 'out to' : 'in from' }}</span></td>
                            <td>
                                <a href="{{ route('devices.neighbours', $other) }}">{{ $other?->name ?: '—' }}</a>
                                <div class="tiny muted">{{ $other?->role }}</div>
                            </td>
                            <td class="small mono">{{ $isSource ? ($link->source_port ?: '—') : ($link->target_port ?: '—') }}</td>
                            <td class="small mono">{{ $isSource ? ($link->target_port ?: '—') : ($link->source_port ?: '—') }}</td>
                            <td><span class="badge muted">{{ title_case_words($link->medium) }}</span></td>
                            <td class="num">{{ $link->capacity_mbps ? number_format($link->capacity_mbps) : '—' }}</td>
                            <td class="num">{{ $link->distance_km ? $link->distance_km.' km' : '—' }}</td>
                            <td><span class="badge {{ status_color($link->status) }}">
                                <span class="dot"></span>{{ title_case_words($link->status) }}</span></td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
@endsection