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

@php
  $moduleMeta = [
      'tickets'      => ['Tickets', 'ticket', 'Ticket-System mit Kategorien & Panels'],
      'applications' => ['Bewerbungen', 'file-text', 'Bewerbungsformulare & Review'],
      'welcome'      => ['Welcome', 'message', 'Begrüßungsnachrichten & Auto-Rolle'],
      'logs'         => ['Logs', 'list', 'Server-Ereignisse protokollieren'],
      'level'        => ['Level', 'star', 'XP & Ranglisten'],
      'guard'        => ['Guard', 'shield', 'Anti-Raid & Auto-Moderation'],
  ];
  $soonMeta = [
      'partner' => ['Partner', 'link', 'Partnerprogramm'],
  ];

  // Für Hinweise/Warnungen: welche Module an sind + ob Felder ohne aktives Modul gesetzt sind.
  $mods = (array) $modules;
  $welcomeOn = (bool) ($mods['welcome'] ?? false);
  $logsOn = (bool) ($mods['logs'] ?? false);
  $welcomeConfigured = filled($settings->welcome_channel_id) || filled($settings->welcome_message) || filled($settings->auto_role_id);
  $logsConfigured = filled($settings->log_channel_id) || ! empty((array) ($settings->log_channels ?? []));
@endphp

@section('content')
  <div class="mb-4">
    <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Einstellungen</h1>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Konfiguriere TacForce Pro für {{ $guild->name }}.</p>
  </div>

  {{-- Kurzanleitung — nimmt die häufigsten Verständnisfragen vorweg. --}}
  <div class="mb-6 rounded-xl border border-blue-500/20 bg-blue-500/5 px-4 py-3 text-[13px]">
    <p class="flex items-center gap-2 font-medium text-blue-800 dark:text-blue-200">
      <x-icon name="sparkles" class="h-4 w-4" /> So funktioniert's
    </p>
    <ul class="mt-1.5 list-disc space-y-1 pl-5 text-blue-700/90 dark:text-blue-300/90">
      <li>Der Bot muss <strong>online</strong> und <strong>auf deinem Server</strong> sein — sonst passiert nichts.</li>
      <li><strong>Channel-/Rollen-IDs holen:</strong> in Discord Entwicklermodus an (Einstellungen&nbsp;→&nbsp;Erweitert&nbsp;→&nbsp;Entwicklermodus), dann Rechtsklick auf Channel/Rolle → <em>„ID kopieren"</em>.</li>
      <li>Ein <strong>Modul</strong> muss rechts <strong>an</strong> sein, damit seine Felder überhaupt wirken.</li>
    </ul>
  </div>

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

    {{-- GENERAL SETTINGS FORM --}}
    <div class="xl:col-span-2">
      <form method="POST" action="{{ route('dashboard.settings.update', $guild) }}" x-data="{ submitting: false }" @submit="submitting = true" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        @csrf
        @method('PUT')

        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Allgemein</h2>
          <p class="mt-0.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">Sprache, Channels und Erscheinungsbild.</p>
        </div>

        <div class="space-y-5 p-5">
          {{-- Language --}}
          <div>
            <label for="language" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Sprache</label>
            <select id="language" name="language" 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 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
              <option value="de" @selected(old('language', $settings->language) === 'de')>Deutsch</option>
              <option value="en" @selected(old('language', $settings->language) === 'en')>English</option>
            </select>
            @error('language') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
            {{-- Log channel --}}
            <div>
              <label for="log_channel_id" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Log-Channel-ID</label>
              <input id="log_channel_id" name="log_channel_id" type="text" inputmode="numeric" placeholder="z. B. 112233445566778899"
                value="{{ old('log_channel_id', $settings->log_channel_id) }}"
                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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('log_channel_id') border-red-500 @enderror">
              @error('log_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
              <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Allgemeiner Fallback für alle Logs. Einzelne Kategorien (unten) überschreiben ihn.</p>
            </div>

            {{-- Welcome channel --}}
            <div>
              <label for="welcome_channel_id" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Welcome-Channel-ID</label>
              <input id="welcome_channel_id" name="welcome_channel_id" type="text" inputmode="numeric" placeholder="z. B. 112233445566778899"
                value="{{ old('welcome_channel_id', $settings->welcome_channel_id) }}"
                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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('welcome_channel_id') border-red-500 @enderror">
              @error('welcome_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
              <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Channel, in dem die Begrüßung gepostet wird.</p>
            </div>

            {{-- News channel --}}
            <div>
              <label for="news_channel_id" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Neuigkeiten-Channel-ID</label>
              <input id="news_channel_id" name="news_channel_id" type="text" inputmode="numeric" placeholder="z. B. 112233445566778899"
                value="{{ old('news_channel_id', $settings->news_channel_id) }}"
                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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('news_channel_id') border-red-500 @enderror">
              @error('news_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
              <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Hier postet <strong>TacForce Operator</strong> neue Funktionen & Updates automatisch.</p>
            </div>

            {{-- Auto role --}}
            <div>
              <label for="auto_role_id" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Auto-Rollen-ID</label>
              <input id="auto_role_id" name="auto_role_id" type="text" inputmode="numeric" placeholder="Rolle bei Beitritt"
                value="{{ old('auto_role_id', $settings->auto_role_id) }}"
                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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('auto_role_id') border-red-500 @enderror">
              @error('auto_role_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
              <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Rolle, die neue Mitglieder beim Beitritt automatisch bekommen.</p>
            </div>

            {{-- Level-Up channel --}}
            <div>
              <label for="levelup_channel_id" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Level-Up-Channel-ID</label>
              <input id="levelup_channel_id" name="levelup_channel_id" type="text" inputmode="numeric" placeholder="z. B. 112233445566778899"
                value="{{ old('levelup_channel_id', $settings->levelup_channel_id) }}"
                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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('levelup_channel_id') border-red-500 @enderror">
              @error('levelup_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
              <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Channel für Level-Up-Nachrichten (leer = im jeweiligen Channel).</p>
            </div>

            {{-- Brand color --}}
            <div>
              <label for="brand_color" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Markenfarbe</label>
              <div class="flex items-center gap-2" x-data="{ color: '{{ old('brand_color', $settings->brand_color ?? '#3B82F6') }}' }">
                <input type="color" x-model="color" aria-label="Farbwähler" class="h-9 w-10 shrink-0 cursor-pointer rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1">
                <input id="brand_color" name="brand_color" type="text" x-model="color" placeholder="#3B82F6"
                  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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('brand_color') border-red-500 @enderror">
              </div>
              @error('brand_color') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            </div>
          </div>

          {{-- Welcome message --}}
          <div>
            <label for="welcome_message" class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Willkommensnachricht</label>
            <textarea id="welcome_message" name="welcome_message" rows="3" placeholder="Willkommen auf {server}, {user}! 👋"
              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 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('welcome_message') border-red-500 @enderror">{{ old('welcome_message', $settings->welcome_message) }}</textarea>
            @error('welcome_message') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            <p class="mt-1 text-[11.5px] text-zinc-400 dark:text-zinc-500">Platzhalter: <code class="rounded bg-zinc-100 dark:bg-zinc-800 px-1">{user}</code> = Mitglied, <code class="rounded bg-zinc-100 dark:bg-zinc-800 px-1">{server}</code> = Servername.</p>

            @if ($welcomeConfigured && ! $welcomeOn)
              <div class="mt-2 flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[12.5px] text-amber-700 dark:text-amber-300">
                <x-icon name="alert" class="mt-0.5 h-4 w-4 shrink-0" />
                <span>Welcome-Felder sind gesetzt, aber das Modul <strong>Welcome</strong> ist <strong>aus</strong> (rechts). So begrüßt der Bot niemanden — schalte Welcome an.</span>
              </div>
            @endif
          </div>

          {{-- Branding toggle --}}
          <div class="flex items-center justify-between rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-4 py-3"
            x-data="{ on: {{ old('branding_enabled', $settings->branding_enabled ?? true) ? 'true' : 'false' }}, locked: {{ $brandingRemovable ? 'false' : 'true' }} }">
            <div>
              <p class="text-sm font-medium text-zinc-700 dark:text-zinc-300">TacForce-Branding anzeigen</p>
              <p class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
                @if ($brandingRemovable)
                  Ausschalten, um das Branding aus Nachrichten zu entfernen.
                @else
                  Nur ab Plan „Pro" abschaltbar.
                @endif
              </p>
            </div>
            <input type="hidden" name="branding_enabled" :value="on ? 1 : 0">
            <button type="button" @click="if(!locked) on = !on" :disabled="locked" :aria-checked="on ? 'true' : 'false'" role="switch"
              :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
              class="relative h-6 w-11 shrink-0 rounded-full transition disabled:opacity-50 disabled:cursor-not-allowed">
              <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1.25rem)' : 'transform: translateX(0)'"></span>
            </button>
          </div>
        </div>

        <div class="flex items-center justify-end gap-3 border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <button type="submit" :disabled="submitting"
            class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
            <span x-show="!submitting">Speichern</span>
            <span x-show="submitting" x-cloak>Speichere…</span>
          </button>
        </div>
      </form>
    </div>

    {{-- MODULES --}}
    <div class="xl:col-span-1">
      <form method="POST" action="{{ route('dashboard.settings.modules', $guild) }}" x-data="{ submitting: false }" @submit="submitting = true" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        @csrf
        @method('PUT')

        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Module</h2>
          <p class="mt-0.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">Nur was hier <strong>an</strong> ist, macht der Bot. Aus = Funktion komplett gestoppt. Nach Ändern <strong>„Module speichern"</strong>.</p>
        </div>

        <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
          @foreach ($moduleMeta as $key => [$label, $ic, $desc])
            @php $on = (bool) old("modules.$key", data_get($modules, $key, false)); @endphp
            <div class="flex items-center justify-between gap-3 px-5 py-3.5" x-data="{ on: {{ $on ? 'true' : 'false' }} }">
              <div class="flex items-start gap-3">
                <x-icon :name="$ic" class="mt-0.5 h-[17px] w-[17px] text-zinc-500 dark:text-zinc-400" stroke="1.6" />
                <div>
                  <p class="text-[13.5px] font-medium text-zinc-900 dark:text-white">{{ $label }}</p>
                  <p class="text-[12px] text-zinc-500 dark:text-zinc-400">{{ $desc }}</p>
                </div>
              </div>
              <input type="hidden" name="modules[{{ $key }}]" :value="on ? 1 : 0">
              <button type="button" @click="on = !on" :aria-checked="on ? 'true' : 'false'" role="switch"
                :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
                class="relative h-6 w-11 shrink-0 rounded-full transition">
                <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1.25rem)' : 'transform: translateX(0)'"></span>
              </button>
            </div>
          @endforeach

          @foreach ($soonMeta as $key => [$label, $ic, $desc])
            <div class="flex items-center justify-between gap-3 px-5 py-3.5 opacity-55">
              <div class="flex items-start gap-3">
                <x-icon :name="$ic" class="mt-0.5 h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
                <div>
                  <p class="text-[13.5px] font-medium text-zinc-500 dark:text-zinc-400">{{ $label }}</p>
                  <p class="text-[12px] text-zinc-400 dark:text-zinc-500">{{ $desc }}</p>
                </div>
              </div>
              <span class="rounded border border-zinc-200 dark:border-zinc-800 px-1.5 py-0.5 text-[10px] font-medium text-zinc-400 dark:text-zinc-500">Bald</span>
            </div>
          @endforeach
        </div>

        <div class="flex items-center justify-end border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <button type="submit" :disabled="submitting"
            class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
            <span x-show="!submitting">Module speichern</span>
            <span x-show="submitting" x-cloak>Speichere…</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- LOG-KANÄLE (pro Kategorie frei konfigurierbar) --}}
  @php
    $logMeta = [
        'member'  => ['📥 Mitglieder', 'Join, Leave, Nickname, Rollen'],
        'mod'     => ['🛡️ Moderation', 'Ban, Unban, Timeout'],
        'message' => ['💬 Nachrichten', 'Bearbeitet & gelöscht'],
        'voice'   => ['🔊 Voice', 'Join, Leave, Move'],
        'ticket'  => ['🎫 Tickets & Bewerbungen', 'Geöffnet, geschlossen, eingegangen'],
        'server'  => ['📋 Server', 'Channels & Rollen erstellt/gelöscht'],
        'bot'     => ['🤖 Bot-Aktionen', 'Panels & Builder'],
    ];
    $logChannels = (array) ($settings->log_channels ?? []);
    $logEvents = (array) ($settings->log_events ?? []);
  @endphp
  <div class="mt-6">
    <form method="POST" action="{{ route('dashboard.settings.logs', $guild) }}" x-data="{ submitting: false }" @submit="submitting = true" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
      @csrf
      @method('PUT')

      <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
        <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Log-Kanäle</h2>
        <p class="mt-0.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">
          Jede Kategorie in einen eigenen Channel routen + an/aus. Leer = fällt auf die allgemeine <strong>Log-Channel-ID</strong> oben zurück.
        </p>
      </div>

      @unless ($logsOn)
        <div class="flex items-start gap-2 border-b border-amber-500/20 bg-amber-500/10 px-5 py-3 text-[12.5px] text-amber-700 dark:text-amber-300">
          <x-icon name="alert" class="mt-0.5 h-4 w-4 shrink-0" />
          <span>Modul <strong>Logs</strong> ist <strong>aus</strong> — egal was hier steht, es wird nichts geloggt. Rechts bei „Module" einschalten.</span>
        </div>
      @endunless

      <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
        @foreach ($logMeta as $key => [$label, $desc])
          @php
            $chanVal = old("channels.$key", $logChannels[$key] ?? '');
            $on = (bool) old("events.$key", array_key_exists($key, $logEvents) ? $logEvents[$key] : true);
          @endphp
          <div class="flex flex-wrap items-center gap-3 px-5 py-3.5" x-data="{ on: {{ $on ? 'true' : 'false' }} }">
            <div class="min-w-[150px] flex-1">
              <p class="text-[13.5px] font-medium text-zinc-900 dark:text-white">{{ $label }}</p>
              <p class="text-[12px] text-zinc-500 dark:text-zinc-400">{{ $desc }}</p>
            </div>
            <input name="channels[{{ $key }}]" type="text" inputmode="numeric" placeholder="Channel-ID (optional)"
              value="{{ $chanVal }}"
              class="w-full sm:w-56 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error("channels.$key") border-red-500 @enderror">
            <input type="hidden" name="events[{{ $key }}]" :value="on ? 1 : 0">
            <button type="button" @click="on = !on" :aria-checked="on ? 'true' : 'false'" role="switch"
              :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
              class="relative h-6 w-11 shrink-0 rounded-full transition" title="An/Aus">
              <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1.25rem)' : 'transform: translateX(0)'"></span>
            </button>
          </div>
        @endforeach
      </div>

      <div class="flex items-center justify-between gap-3 border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
        <p class="text-[12px] text-zinc-400 dark:text-zinc-500">Braucht das Modul „Logs" aktiv. Channel-IDs per Rechtsklick → ID kopieren.</p>
        <button type="submit" :disabled="submitting"
          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
          <span x-show="!submitting">Log-Kanäle speichern</span>
          <span x-show="submitting" x-cloak>Speichere…</span>
        </button>
      </div>
    </form>
  </div>

  {{-- GUARD / AUTO-MODERATION --}}
  @php
    $automod = (array) ($settings->automod ?? []);
    $guardOn = (bool) ($mods['guard'] ?? false);
    $amInvites  = (bool) old('invites',  $automod['invites']  ?? false);
    $amSpam     = (bool) old('spam',     $automod['spam']     ?? false);
    $amMentions = (int)  old('mentions', $automod['mentions'] ?? 0);
  @endphp
  <div class="mt-6">
    <form method="POST" action="{{ route('dashboard.settings.guard', $guild) }}" x-data="{ submitting: false }" @submit="submitting = true" class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
      @csrf
      @method('PUT')

      <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
        <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Guard / Auto-Moderation</h2>
        <p class="mt-0.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">
          Automatische Moderation: Invite-Links, Mention-Spam und Flood. Moderatoren (Recht „Nachrichten verwalten") sind ausgenommen.
        </p>
      </div>

      @unless ($guardOn)
        <div class="flex items-start gap-2 border-b border-amber-500/20 bg-amber-500/10 px-5 py-3 text-[12.5px] text-amber-700 dark:text-amber-300">
          <x-icon name="alert" class="mt-0.5 h-4 w-4 shrink-0" />
          <span>Modul <strong>Guard</strong> ist <strong>aus</strong> — egal was hier steht, es wird nichts moderiert. Rechts bei „Module" einschalten.</span>
        </div>
      @endunless

      <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
        {{-- Invite-Links --}}
        <div class="flex items-center justify-between gap-3 px-5 py-3.5" x-data="{ on: {{ $amInvites ? 'true' : 'false' }} }">
          <div class="min-w-[150px] flex-1">
            <p class="text-[13.5px] font-medium text-zinc-900 dark:text-white">🔗 Invite-Links löschen</p>
            <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Löscht Nachrichten mit discord.gg-/Invite-Links. Braucht MessageContent-Intent.</p>
          </div>
          <input type="hidden" name="invites" :value="on ? 1 : 0">
          <button type="button" @click="on = !on" :aria-checked="on ? 'true' : 'false'" role="switch"
            :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
            class="relative h-6 w-11 shrink-0 rounded-full transition" title="An/Aus">
            <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1.25rem)' : 'transform: translateX(0)'"></span>
          </button>
        </div>

        {{-- Spam / Flood --}}
        <div class="flex items-center justify-between gap-3 px-5 py-3.5" x-data="{ on: {{ $amSpam ? 'true' : 'false' }} }">
          <div class="min-w-[150px] flex-1">
            <p class="text-[13.5px] font-medium text-zinc-900 dark:text-white">🚫 Spam-Schutz</p>
            <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Löscht Flood (5+ Nachrichten in 5 Sekunden pro Person).</p>
          </div>
          <input type="hidden" name="spam" :value="on ? 1 : 0">
          <button type="button" @click="on = !on" :aria-checked="on ? 'true' : 'false'" role="switch"
            :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
            class="relative h-6 w-11 shrink-0 rounded-full transition" title="An/Aus">
            <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1.25rem)' : 'transform: translateX(0)'"></span>
          </button>
        </div>

        {{-- Max. Mentions --}}
        <div class="flex flex-wrap items-center gap-3 px-5 py-3.5">
          <div class="min-w-[150px] flex-1">
            <p class="text-[13.5px] font-medium text-zinc-900 dark:text-white">📢 Max. Erwähnungen</p>
            <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Nachricht löschen ab so vielen @-Mentions (User + Rollen). 0 = aus.</p>
          </div>
          <input name="mentions" type="number" min="0" max="50" inputmode="numeric" placeholder="0"
            value="{{ $amMentions }}"
            class="w-full sm:w-28 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('mentions') border-red-500 @enderror">
          @error('mentions') <p class="mt-1.5 w-full text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
        </div>
      </div>

      <div class="flex items-center justify-between gap-3 border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
        <p class="text-[12px] text-zinc-400 dark:text-zinc-500">Braucht das Modul „Guard" aktiv. Invite-/Text-Filter benötigen den MessageContent-Intent.</p>
        <button type="submit" :disabled="submitting"
          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
          <span x-show="!submitting">Guard speichern</span>
          <span x-show="submitting" x-cloak>Speichere…</span>
        </button>
      </div>
    </form>
  </div>
@endsection