@extends('layouts.dashboard')
@section('title', 'Server-Aufbau · '.$guild->name.' · TacForce Pro')

@section('content')
  <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
    <div>
      <div class="flex items-center gap-2">
        <span class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400">// Server-Aufbau</span>
        @unless ($entitled)
          <span class="rounded-full bg-amber-500/10 px-2 py-0.5 font-mono text-[10px] font-semibold text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20">PRO</span>
        @endunless
      </div>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Server bauen & konfigurieren</h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Rollen, Kategorien und Channels per Klick — TacForce Operator setzt es auf {{ $guild->name }} um.</p>
    </div>
    <form method="POST" action="{{ route('dashboard.builder.sync', $guild) }}">
      @csrf
      <button class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2.5 transition">
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>
        Struktur einlesen
      </button>
    </form>
  </div>

  @if ($pending > 0)
    <div class="mb-6 flex items-center gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 px-4 py-2.5 text-sm text-blue-700 dark:text-blue-300">
      <span class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span></span>
      {{ $pending }} Auftrag(e) in Bearbeitung — die Seite kurz später neu laden.
    </div>
  @endif

  @unless ($entitled)
    {{-- MONETARISIERUNG: Upsell --}}
    <div class="mb-8 overflow-hidden rounded-2xl border border-blue-500/30 bg-gradient-to-br from-blue-500/10 to-transparent p-6">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div class="max-w-xl">
          <h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Server Builder freischalten</h2>
          <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
            Komplette Server-Strukturen per Klick anlegen, Rollen &amp; Channels verwalten und fertige Blueprints anwenden — ab dem <strong>Pro-Plan</strong>. Monatlich mietbar, jederzeit kündbar.
          </p>
        </div>
        <a href="{{ route('dashboard.order.create', ['guild' => $guild, 'plan' => 'pro']) }}" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-5 py-2.5 shadow-lg shadow-blue-600/20 transition">
          Jetzt upgraden
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  @endunless

  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">

    {{-- BLUEPRINTS --}}
    <div class="xl:col-span-2 space-y-6">
      <div>
        <h2 class="text-sm font-semibold text-zinc-900 dark:text-white">Vorlagen (Blueprints)</h2>
        <p class="text-xs text-zinc-500 dark:text-zinc-400">Ein Klick = komplette Struktur. Idempotent — Vorhandenes wird übersprungen.</p>
      </div>
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2" x-data="{ confirmId: null }">
        @foreach ($blueprints as $bp)
          <div class="tf-hud relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5">
            <div class="absolute inset-x-0 top-0 h-1" style="background-color: {{ $bp->accent_color }}"></div>
            <h3 class="font-semibold text-zinc-900 dark:text-white">{{ $bp->name }}</h3>
            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $bp->description }}</p>
            <div class="mt-3 flex flex-wrap gap-2 font-mono text-[11px] text-zinc-500 dark:text-zinc-400">
              <span class="rounded bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5">{{ $bp->roleCount() }} Rollen</span>
              <span class="rounded bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5">{{ $bp->categoryCount() }} Kategorien</span>
              <span class="rounded bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5">{{ $bp->channelCount() }} Channels</span>
            </div>
            <div class="mt-4">
              @if ($entitled)
                <button type="button" @click="confirmId = {{ $bp->id }}"
                        class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2 transition">
                  Anwenden
                </button>
                {{-- Bestätigung --}}
                <div x-cloak x-show="confirmId === {{ $bp->id }}" class="fixed inset-0 z-50 flex items-center justify-center p-4">
                  <div class="absolute inset-0 bg-zinc-950/60 backdrop-blur-sm" @click="confirmId = null"></div>
                  <div class="relative w-full max-w-md rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 shadow-2xl">
                    <h3 class="text-base font-semibold text-zinc-900 dark:text-white">„{{ $bp->name }}" anwenden?</h3>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Legt {{ $bp->roleCount() }} Rollen, {{ $bp->categoryCount() }} Kategorien und {{ $bp->channelCount() }} Channels auf <strong>{{ $guild->name }}</strong> an. Bereits vorhandene bleiben unberührt.</p>
                    <div class="mt-6 flex justify-end gap-3">
                      <button type="button" @click="confirmId = null" class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2.5 transition">Abbrechen</button>
                      <form method="POST" action="{{ route('dashboard.builder.apply', $guild) }}">
                        @csrf
                        <input type="hidden" name="blueprint_id" value="{{ $bp->id }}">
                        <button type="submit" class="rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition">Anwenden</button>
                      </form>
                    </div>
                  </div>
                </div>
              @else
                <span class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-400 text-sm font-medium px-4 py-2 cursor-not-allowed">
                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                  Ab Pro
                </span>
              @endif
            </div>
          </div>
        @endforeach
      </div>

      {{-- QUICK-CREATE --}}
      @if ($entitled)
        @php
          $structRoles = collect($structure?->roles_json ?? []);
          $structChannels = collect($structure?->channels_json ?? []);
          $voiceChannels = $structChannels->where('type', 'voice')->values();
          $editableChannels = $structChannels->whereIn('type', ['text', 'voice'])->values();
          $categoryNames = $structChannels->where('type', 'category')->pluck('name')->filter()->values();
        @endphp
        {{-- Autovervollständigung aus dem letzten Scan --}}
        <datalist id="tfRoles">@foreach ($structRoles as $r)<option value="{{ $r['name'] ?? '' }}">@endforeach</datalist>
        <datalist id="tfCategories">@foreach ($categoryNames as $cn)<option value="{{ $cn }}">@endforeach</datalist>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
          {{-- Rolle --}}
          <form method="POST" action="{{ route('dashboard.builder.role', $guild) }}" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 space-y-3">
            @csrf
            <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-500">Rolle anlegen</h4>
            <input name="name" required placeholder="Name" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <div class="flex items-center gap-2">
              <input type="color" name="color" value="#3B82F6" class="h-9 w-10 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 cursor-pointer">
              <label class="flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-300"><input type="checkbox" name="hoist" value="1" class="rounded"> separat anzeigen</label>
            </div>
            <button class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-3 py-2 transition">Anlegen</button>
          </form>

          {{-- Kategorie --}}
          <form method="POST" action="{{ route('dashboard.builder.category', $guild) }}" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 space-y-3">
            @csrf
            <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-500">Kategorie anlegen</h4>
            <input name="name" required placeholder="z. B. 💬 Community" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <button class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-3 py-2 transition">Anlegen</button>
          </form>

          {{-- Channel --}}
          <form method="POST" action="{{ route('dashboard.builder.channel', $guild) }}" x-data="{ t: 'text', adv: false }" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 space-y-3">
            @csrf
            <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-500">Channel anlegen</h4>
            <input name="name" required placeholder="Name" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <div class="flex gap-2">
              <select name="type" x-model="t" class="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-2 py-2 text-sm outline-none focus:border-blue-500">
                <option value="text">Text</option>
                <option value="voice">Voice</option>
              </select>
              <input name="parent_name" list="tfCategories" placeholder="Kategorie (optional)" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            </div>
            <input type="number" min="0" max="21600" name="slowmode" x-show="t==='text'" placeholder="Slowmode (Sek., 0 = aus)" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <input type="number" min="0" max="99" name="user_limit" x-show="t==='voice'" x-cloak placeholder="User-Limit (0 = ∞)" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <button type="button" @click="adv=!adv" class="text-[11px] font-medium text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">Rechte / privat <span x-text="adv ? '▲' : '▼'"></span></button>
            <div x-show="adv" x-cloak class="space-y-2">
              <label class="flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-300"><input type="checkbox" name="private" value="1" class="rounded"> nur für bestimmte Rollen (privat)</label>
              <input name="allow_roles" list="tfRoles" placeholder="Rollen (Komma): Team, Admin" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
              <label class="flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-300" x-show="t==='text'"><input type="checkbox" name="nsfw" value="1" class="rounded"> NSFW-Channel</label>
            </div>
            <button class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-3 py-2 transition">Anlegen</button>
          </form>
        </div>

        {{-- ERWEITERTE CHANNEL-VERWALTUNG: AFK + bearbeiten --}}
        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
          {{-- AFK-Channel --}}
          <form method="POST" action="{{ route('dashboard.builder.afk', $guild) }}" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 space-y-3">
            @csrf
            <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-500">AFK-Channel</h4>
            <p class="text-[11px] text-zinc-500 dark:text-zinc-400">Voice-Channel, in den inaktive Mitglieder verschoben werden.</p>
            @if ($voiceChannels->isNotEmpty())
              <select name="channel_name" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500">
                <option value="">— keiner (entfernen) —</option>
                @foreach ($voiceChannels as $vc)<option value="{{ $vc['name'] }}">🔊 {{ $vc['name'] }}</option>@endforeach
              </select>
            @else
              <input name="channel_name" placeholder="Name des Voice-Channels (z. B. AFK)" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            @endif
            <select name="timeout" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500">
              <option value="60">Timeout: 1 Minute</option>
              <option value="300" selected>Timeout: 5 Minuten</option>
              <option value="900">Timeout: 15 Minuten</option>
              <option value="1800">Timeout: 30 Minuten</option>
              <option value="3600">Timeout: 60 Minuten</option>
            </select>
            <button class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-3 py-2 transition">Setzen</button>
          </form>

          {{-- Channel bearbeiten --}}
          <form method="POST" action="{{ route('dashboard.builder.channel.edit', $guild) }}" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 space-y-3">
            @csrf
            <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-500">Channel bearbeiten</h4>
            @if ($editableChannels->isNotEmpty())
              <select name="channel_id" required class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500">
                <option value="">— Channel wählen —</option>
                @foreach ($editableChannels as $ch)<option value="{{ $ch['id'] }}">{{ $ch['type'] === 'voice' ? '🔊' : '#' }} {{ $ch['name'] }}</option>@endforeach
              </select>
            @else
              <input name="channel_id" required placeholder="Channel-ID (erst „Struktur einlesen")" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            @endif
            <label class="flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-300"><input type="checkbox" name="private" value="1" class="rounded"> privat — nur diese Rollen:</label>
            <input name="allow_roles" list="tfRoles" placeholder="Rollen (Komma): Team, Admin" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            <div class="flex gap-2">
              <input type="number" min="0" max="21600" name="slowmode" placeholder="Slowmode s" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
              <input type="number" min="0" max="99" name="user_limit" placeholder="V-Limit" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">
            </div>
            <button class="w-full rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-3 py-2 transition">Anwenden</button>
          </form>
        </div>
      @endif

      {{-- JSON IMPORT / EXPORT --}}
      @if ($entitled)
        <div x-data="{ tab: 'import', copied: false }" class="tf-hud rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5">
          <div class="flex items-center gap-2">
            <button type="button" @click="tab='import'" :class="tab==='import' ? 'bg-blue-600 text-white' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="rounded-lg px-3 py-1.5 text-sm font-medium transition">JSON importieren</button>
            <button type="button" @click="tab='export'" :class="tab==='export' ? 'bg-blue-600 text-white' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'" class="rounded-lg px-3 py-1.5 text-sm font-medium transition">Als JSON exportieren</button>
          </div>

          {{-- IMPORT --}}
          <div x-show="tab==='import'" class="mt-4">
            <p class="mb-2 text-xs text-zinc-500 dark:text-zinc-400">
              Eigene Struktur als JSON — der Bot setzt sie um (idempotent, Vorhandenes wird angepasst).
              Channels können <span class="font-mono">topic</span>, <span class="font-mono">slowmode</span>, <span class="font-mono">user_limit</span>, <span class="font-mono">nsfw</span>,
              <span class="font-mono">"private":true</span> + <span class="font-mono">"allow_roles":["Team"]</span> (oder explizite <span class="font-mono">permissions</span>).
              Dazu <span class="font-mono">"afk":{"channel":"AFK","timeout":300}</span>.
            </p>
            <form method="POST" action="{{ route('dashboard.builder.import', $guild) }}">
              @csrf
              <textarea name="structure" rows="12" required
                        placeholder='{&#10;  "roles": [ { "name": "Team", "color": "#3B82F6", "hoist": true } ],&#10;  "categories": [&#10;    { "name": "🔒 Intern", "private": true, "allow_roles": ["Team"], "channels": [&#10;      { "name": "staff-chat", "type": "text", "slowmode": 5 },&#10;      { "name": "Team-Voice", "type": "voice", "user_limit": 5 }&#10;    ] }&#10;  ],&#10;  "afk": { "channel": "AFK", "timeout": 300 }&#10;}'
                        class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 font-mono text-xs outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30">{{ old('structure') }}</textarea>
              <button class="mt-3 inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2 transition">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                JSON anwenden
              </button>
            </form>
          </div>

          {{-- EXPORT --}}
          <div x-show="tab==='export'" x-cloak class="mt-4">
            @if ($exportJson)
              <p class="mb-2 text-xs text-zinc-500 dark:text-zinc-400">Aktuelle Struktur (aus dem letzten Scan) — kopieren, anpassen, oben re-importieren.</p>
              <textarea readonly rows="10" x-ref="exp" class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3 py-2 font-mono text-xs text-zinc-600 dark:text-zinc-300">{{ $exportJson }}</textarea>
              <button type="button" @click="navigator.clipboard.writeText($refs.exp.value); copied=true; setTimeout(()=>copied=false,1500)"
                      class="mt-3 inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2 transition">
                <span x-show="!copied">Kopieren</span><span x-show="copied" x-cloak class="text-emerald-500">Kopiert ✓</span>
              </button>
            @else
              <p class="text-sm text-zinc-500 dark:text-zinc-400">Noch kein Scan vorhanden. Klick oben auf <strong>„Struktur einlesen"</strong>.</p>
            @endif
          </div>
        </div>
      @endif
    </div>

    {{-- IST-STRUKTUR --}}
    <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5">
      <div class="flex items-center justify-between">
        <h2 class="text-sm font-semibold text-zinc-900 dark:text-white">Aktuelle Struktur</h2>
        <span class="font-mono text-[11px] text-zinc-400">{{ $structure && $structure->synced_at ? $structure->synced_at->diffForHumans() : 'nie' }}</span>
      </div>

      @if (! $structure)
        <p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">Noch nicht eingelesen. Klick oben auf <strong>„Struktur einlesen"</strong> — der Bot schreibt Rollen &amp; Channels hierher.</p>
      @else
        @php
          $roles = $structure->roles_json ?? [];
          $channels = collect($structure->channels_json ?? []);
          $cats = $channels->where('type', 'category');
          $byParent = $channels->where('type', '!=', 'category')->groupBy('parent_id');
          $uncat = $channels->filter(fn ($c) => ($c['type'] ?? '') !== 'category' && empty($c['parent_id']));
        @endphp

        @if ($entitled)
          <p class="mt-3 text-[11px] text-zinc-400 dark:text-zinc-500">Zum Löschen auf das <x-icon name="trash" class="inline h-3 w-3" /> klicken. Bearbeiten (Rechte/Slowmode) über „Channel bearbeiten" links.</p>
        @endif

        <div class="mt-4">
          <p class="font-mono text-[11px] uppercase tracking-wide text-zinc-400">Rollen ({{ count($roles) }})</p>
          <div class="mt-2 flex flex-wrap gap-1.5">
            @foreach ($roles as $r)
              <span class="inline-flex items-center gap-1.5 rounded-full border border-zinc-200 dark:border-zinc-800 px-2 py-0.5 text-xs text-zinc-700 dark:text-zinc-300">
                <span class="h-2 w-2 rounded-full" style="background-color: {{ $r['color'] ?? '#71717A' }}"></span>{{ $r['name'] }}
                @if ($entitled && empty($r['managed']))
                  <form method="POST" action="{{ route('dashboard.builder.role.delete', $guild) }}" class="inline-flex"
                        onsubmit="return confirm('Rolle „{{ $r['name'] }}“ wirklich löschen? Kann nicht rückgängig gemacht werden.');">
                    @csrf
                    <input type="hidden" name="role_id" value="{{ $r['id'] }}">
                    <input type="hidden" name="name" value="{{ $r['name'] }}">
                    <button type="submit" title="Rolle löschen" class="text-zinc-300 transition hover:text-red-500 dark:text-zinc-600 dark:hover:text-red-500">&times;</button>
                  </form>
                @endif
              </span>
            @endforeach
          </div>
        </div>

        <div class="mt-5 space-y-3">
          <p class="font-mono text-[11px] uppercase tracking-wide text-zinc-400">Channels ({{ $channels->count() }})</p>
          @foreach ($cats as $cat)
            <div>
              <div class="flex items-center justify-between gap-2">
                <p class="min-w-0 truncate text-xs font-semibold text-zinc-600 dark:text-zinc-300">{{ $cat['name'] }}</p>
                @if ($entitled)
                  <form method="POST" action="{{ route('dashboard.builder.channel.delete', $guild) }}"
                        onsubmit="return confirm('Kategorie „{{ $cat['name'] }}“ löschen? (Channels darin bleiben bestehen.)');">
                    @csrf
                    <input type="hidden" name="channel_id" value="{{ $cat['id'] }}">
                    <input type="hidden" name="name" value="{{ $cat['name'] }}">
                    <button type="submit" title="Kategorie löschen" class="shrink-0 text-zinc-300 transition hover:text-red-500 dark:text-zinc-600 dark:hover:text-red-500"><x-icon name="trash" class="h-3.5 w-3.5" /></button>
                  </form>
                @endif
              </div>
              <div class="mt-1 space-y-0.5 pl-3">
                @foreach ($byParent[$cat['id']] ?? [] as $ch)
                  @include('dashboard.partials.builder-channel-row', ['ch' => $ch])
                @endforeach
              </div>
            </div>
          @endforeach

          @if ($uncat->isNotEmpty())
            <div>
              <p class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Ohne Kategorie</p>
              <div class="mt-1 space-y-0.5 pl-3">
                @foreach ($uncat as $ch)
                  @include('dashboard.partials.builder-channel-row', ['ch' => $ch])
                @endforeach
              </div>
            </div>
          @endif
        </div>
      @endif
    </div>
  </div>
@endsection