<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= rack ? 'Bewerk' : 'Nieuwe' %> Rack — 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">
      <div>
        <a href="/racks" class="back-link">← Terug naar racks</a>
        <h1><%= rack ? 'Bewerk: ' + rack.name : 'Nieuwe Rack' %></h1>
      </div>
    </div>

    <form action="/racks/<%= rack ? rack.id + '/edit' : 'new' %>" method="POST" class="form-card">
      <% if (!rack) { %>
      <div class="field">
        <label for="client_id">Cliënt *</label>
        <select name="client_id" required>
          <option value="">Selecteer cliënt...</option>
          <% clients.forEach(function(c) { %>
          <option value="<%= c.id %>" <%= (selected && String(selected) === String(c.id)) ? 'selected' : '' %>><%= c.name %></option>
          <% }) %>
        </select>
      </div>
      <% } %>
      <div class="form-grid">
        <div class="field">
          <label for="name">Rack naam *</label>
          <input type="text" name="name" id="name" value="<%= rack ? rack.name : '' %>" required>
        </div>
        <div class="field">
          <label for="total_units">Hoogte (U)</label>
          <input type="number" name="total_units" id="total_units" value="<%= rack ? rack.total_units : 42 %>" min="12" max="52">
        </div>
        <div class="field">
          <label for="location">Locatie</label>
          <input type="text" name="location" id="location" value="<%= rack ? rack.location : '' %>" placeholder="Bv. Rij A, Kolom 3">
        </div>
        <div class="field">
          <label for="datacenter">Datacenter</label>
          <input type="text" name="datacenter" id="datacenter" value="<%= rack ? rack.datacenter : '' %>">
        </div>
      </div>
      <div class="field">
        <label for="notes">Notities</label>
        <textarea name="notes" id="notes" rows="3"><%= rack ? rack.notes : '' %></textarea>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-accent"><%= rack ? 'Opslaan' : 'Aanmaken' %></button>
        <a href="/racks" class="btn btn-secondary">Annuleren</a>
      </div>
    </form>
  </div>
<script src="/js/theme.js"></script></body>
</html>
