initial commit

resources/views/partials/status-badge.blade.php

@@ -0,0 +1,12 @@
+@php
+$classes = match($status) {
+    'active' => 'bg-emerald-950 text-emerald-400 border-emerald-800',
+    'pending' => 'bg-amber-950 text-amber-400 border-amber-800',
+    'failed' => 'bg-red-950 text-red-400 border-red-800',
+    default => 'bg-slate-800 text-slate-400 border-slate-700',
+};
+$labels = ['active' => 'Aktiv', 'pending' => 'Ausstehend', 'failed' => 'Fehler'];
+@endphp
+<span class="inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium {{ $classes }}">
+    {{ $labels[$status] ?? $status }}
+</span>

resources/views/partials/vm-device-fields.blade.php

@@ -0,0 +1,28 @@
+<div id="devices-container" class="space-y-3">
+    @php $devices = old('devices', $devices ?? []); @endphp
+    @forelse($devices as $i => $device)
+        @include('partials.vm-device-row', ['index' => $i, 'device' => $device, 'deviceTypes' => $deviceTypes])
+    @empty
+    @endforelse
+</div>
+<button type="button" id="add-device" class="mt-2 text-sm text-cyan-400 hover:underline">+ Gerät hinzufügen</button>
+
+<template id="device-row-template">
+    @include('partials.vm-device-row', ['index' => '__INDEX__', 'device' => [], 'deviceTypes' => $deviceTypes])
+</template>
+
+@push('scripts')
+<script>
+document.getElementById('add-device')?.addEventListener('click', () => {
+    const container = document.getElementById('devices-container');
+    const index = container.children.length;
+    const tpl = document.getElementById('device-row-template').innerHTML.replace(/__INDEX__/g, index);
+    container.insertAdjacentHTML('beforeend', tpl);
+});
+document.getElementById('devices-container')?.addEventListener('click', (e) => {
+    if (e.target.classList.contains('remove-device')) {
+        e.target.closest('.device-row')?.remove();
+    }
+});
+</script>
+@endpush

resources/views/partials/vm-device-row.blade.php

@@ -0,0 +1,25 @@
+<div class="device-row rounded-lg border border-slate-700 bg-slate-800/50 p-4">
+    <div class="mb-3 flex items-center justify-between">
+        <span class="text-sm font-medium text-slate-300">Zusatzgerät</span>
+        <button type="button" class="remove-device text-xs text-red-400 hover:underline">Entfernen</button>
+    </div>
+    <div class="grid gap-3 sm:grid-cols-3">
+        <label>
+            <span class="text-xs text-slate-500">Typ</span>
+            <select name="devices[{{ $index }}][type]" class="mt-1 w-full rounded border border-slate-600 bg-slate-800 px-2 py-1.5 text-sm">
+                <option value="">— wählen —</option>
+                @foreach($deviceTypes as $value => $label)
+                <option value="{{ $value }}" @selected(($device['type'] ?? '') === $value)>{{ $label }}</option>
+                @endforeach
+            </select>
+        </label>
+        <label>
+            <span class="text-xs text-slate-500">Slot (z.B. scsi1)</span>
+            <input name="devices[{{ $index }}][slot]" value="{{ $device['slot'] ?? '' }}" class="mt-1 w-full rounded border border-slate-600 bg-slate-800 px-2 py-1.5 text-sm">
+        </label>
+        <label>
+            <span class="text-xs text-slate-500">Konfiguration (JSON-Felder)</span>
+            <input name="devices[{{ $index }}][config][size_gb]" placeholder="size_gb (Disk)" value="{{ $device['config']['size_gb'] ?? '' }}" class="mt-1 w-full rounded border border-slate-600 bg-slate-800 px-2 py-1.5 text-sm">
+        </label>
+    </div>
+</div>