<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netwerk — Mek-Tech Consulting</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/dynamic.css">
  <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
</head>
<body>
  <nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>

  <div class="container">
    <a href="javascript:history.back()" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug</a>
<div class="page-header">
      <h1>Netwerk</h1>
      <div class="header-actions">
        <a href="/networking/devices/new" class="btn btn-primary">+ Netwerk device</a>
        <a href="/networking/connections/new" class="btn btn-secondary">+ Connectie</a>
      </div>
    </div>

    <section class="section">
      <h3 class="section-title">Netwerk Devices (<%= devices.length %>)</h3>
      <% if (devices.length === 0) { %>
      <div class="empty-state"><p>Nog geen netwerk devices. <a href="/networking/devices/new" class="link">Voeg een switch of router toe</a>.</p></div>
      <% } else { %>
      <div class="device-grid">
        <% devices.forEach(function(d) { %>
        <a href="/networking/devices/<%= d.id %>" class="device-card <%= d.device_type %>">
          <div class="device-icon">
            <% if (d.device_type === 'switch') { %>⟷<% } else if (d.device_type === 'router') { %>⟳<% } else if (d.device_type === 'firewall') { %>⊡<% } else { %>◈<% } %>
          </div>
          <div class="device-info">
            <strong><%= d.name %></strong>
            <span class="client-meta"><%= d.device_type %> — <%= d.model || 'onbekend' %></span>
            <span class="client-meta"><%= d.client_name %></span>
          </div>
          <span class="status-badge <%= d.status %>"><%= d.status %></span>
        </a>
        <% }) %>
      </div>
      <% } %>
    </section>

    <section class="section">
      <h3 class="section-title">Connecties (<%= connections.length %>)</h3>
      <% if (connections.length === 0) { %>
      <div class="empty-state"><p>Nog geen connecties.</p></div>
      <% } else { %>
      <table class="data-table">
        <thead><tr><th>Naam</th><th>Cliënt</th><th>Van</th><th>Poort</th><th>Naar</th><th>Poort</th><th>Media</th><th>Snelheid</th><th>Status</th></tr></thead>
        <tbody>
          <% connections.forEach(function(c) { %>
          <tr>
            <td><%= c.name || '-' %></td>
            <td><%= c.client_name %></td>
            <td><%= c.from_type %> <%= c.from_id || '' %></td>
            <td><%= c.from_port || '-' %></td>
            <td><%= c.to_type %> <%= c.to_id || '' %></td>
            <td><%= c.to_port || '-' %></td>
            <td><span class="media-badge <%= c.media_type %>"><%= c.media_type %></span></td>
            <td><%= c.speed %></td>
            <td><span class="status-badge <%= c.status %>"><%= c.status %></span></td>
          </tr>
          <% }) %>
        </tbody>
      </table>
      <% } %>
    </section>
  </div>
<script src="/js/theme.js"></script></body>
</html>
