@extends('layouts.app')
@section('title', 'Routers')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div class="text-slate-500">Manage all company routers from one place.</div>
    <a href="{{ route('routers.create') }}" class="rounded-2xl bg-sky-600 text-white px-5 py-3 font-semibold">Add Router</a>
</div>

<div class="overflow-x-auto rounded-3xl border border-slate-200">
    <table class="min-w-full text-sm bg-white">
        <thead class="bg-slate-50">
            <tr class="text-left text-slate-500">
                <th class="p-4">Name</th>
                <th class="p-4">Site</th>
                <th class="p-4">Model</th>
                <th class="p-4">LAN IP</th>
                <th class="p-4">Status</th>
                <th class="p-4">Last Seen</th>
                <th class="p-4"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
            @foreach($routers as $router)
                <tr>
                    <td class="p-4 font-semibold">{{ $router->name }}</td>
                    <td class="p-4">{{ $router->site_name }}</td>
                    <td class="p-4">{{ $router->model }}</td>
                    <td class="p-4">{{ $router->lan_ip }}</td>
                    <td class="p-4">{{ strtoupper($router->status) }}</td>
                    <td class="p-4">{{ optional($router->last_seen_at)->diffForHumans() }}</td>
                    <td class="p-4"><a href="{{ route('routers.show', $router) }}" class="text-sky-600 font-semibold">Open</a></td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-6">{{ $routers->links() }}</div>
@endsection