{{define "settings_content"}}
<div class="max-w-7xl mx-auto space-y-8 text-sm" x-data="{ toast: '', showToast: false, saveSuccess: false }"
     x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))">

  <!-- Toast -->
  <div x-show="showToast" x-cloak
       class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
    <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    <span x-text="toast"></span>
  </div>

  <!-- Header -->
  <div class="border-b border-outline-variant/30 pb-4">
    <h2 class="text-xl font-bold text-on-surface tracking-tight">Workspace Preferences</h2>
    <p class="text-xs text-on-surface-variant mt-0.5">Configure authentication sync protocols and cloud billing</p>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    <!-- Left: profile + toggles -->
    <div class="lg:col-span-8 space-y-8">

      <!-- Profile Form -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          Developer Profile
        </h3>
        <form method="post" action="/settings" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant">FULL NAME</label>
            <input type="text" name="name" value="User"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-semibold text-on-surface">
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant">EMAIL ADDRESS</label>
            <input type="email" name="email" value="user@hostkeeper.io"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
          </div>
          <div class="flex flex-col gap-1.5 sm:col-span-2">
            <label class="text-xs font-bold text-on-surface-variant">WORKPLACE DESIGNATION / ROLE</label>
            <input type="text" name="role" value="DevOps Engineer"
                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
          </div>
          <div class="sm:col-span-2 pt-2 flex justify-end">
            <button type="submit"
                    class="flex items-center gap-2 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2.5 px-6 rounded-xl shadow-md transition-all">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
              Save Changes
            </button>
          </div>
        </form>
      </div>

      <!-- Feature Toggles -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          Security & Transmission Protocols
        </h3>
        <div class="space-y-4 divide-y divide-outline-variant/20">
          <label class="flex items-center justify-between py-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Cryptographic Keychain Backup</h4>
              <p class="text-xs text-on-surface-variant">Synchronize securely encrypted keys automatically inside iCloud/Google drive sandboxes.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>

          <label class="flex items-center justify-between pt-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Real-time SFTP Connection Polling</h4>
              <p class="text-xs text-on-surface-variant">Enable background file watchers to automatically refresh the directory tree upon local file modifications.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>

          <label class="flex items-center justify-between pt-3">
            <div class="space-y-0.5 pr-4">
              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Desktop Push Notifications</h4>
              <p class="text-xs text-on-surface-variant">Trigger native system indicators upon complete transmissions of download/upload streams.</p>
            </div>
            <button type="button" role="switch"
                    x-data="{ on: false }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
        </div>
      </div>

      <!-- Terminal Settings -->
      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          Terminal Preferences
        </h3>
        <form method="post" action="/settings" class="space-y-5">
          <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-1">
              <label class="text-xs font-bold text-on-surface-variant">FONT SIZE</label>
              <select name="fontSize"
                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
                <option value="12">12px</option>
                <option value="13">13px</option>
                <option value="14" selected>14px</option>
                <option value="15">15px</option>
                <option value="16">16px</option>
                <option value="18">18px</option>
              </select>
            </div>
            <div class="flex flex-col gap-1">
              <label class="text-xs font-bold text-on-surface-variant">SCROLLBACK</label>
              <select name="scrollback"
                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
                <option value="1000">1,000</option>
                <option value="5000" selected>5,000</option>
                <option value="10000">10,000</option>
              </select>
            </div>
          </div>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Blinking Cursor</span>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Terminal Bell</span>
            <button type="button" role="switch"
                    x-data="{ on: false }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <label class="flex items-center justify-between py-2">
            <span class="text-sm font-medium text-on-surface">Auto-Reconnect</span>
            <button type="button" role="switch"
                    x-data="{ on: true }"
                    @click="on = !on; $el.classList.toggle('active')"
                    :class="on ? 'active' : ''"
                    class="toggle-switch" style="width:44px;height:24px">
              <span class="toggle-knob"></span>
            </button>
          </label>
          <div class="pt-2 flex justify-end">
            <button type="submit"
                    class="bg-primary text-white py-2 px-6 rounded-xl font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Settings</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Right: billing + devices + danger -->
    <div class="lg:col-span-4 space-y-8">

      <!-- Billing Card -->
      <div class="bg-primary text-on-primary p-6 rounded-2xl shadow-lg relative overflow-hidden flex flex-col justify-between h-48">
        <div class="relative z-10">
          <div class="flex justify-between items-start">
            <span class="px-2.5 py-1 bg-white/20 rounded-full font-bold text-[9px] uppercase tracking-wider text-white">HostKeeper Pro</span>
            <svg class="w-5 h-5 text-white fill-white" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
          </div>
          <h3 class="font-black text-2xl tracking-tight mt-3">Active Workspace</h3>
        </div>
        <div class="relative z-10 flex justify-between items-end">
          <div>
            <span class="text-xs opacity-80 uppercase font-semibold">RENEWAL CYCLE</span>
            <p class="text-xs font-bold text-white">July 2026</p>
          </div>
          <span class="text-[10px] font-bold bg-white text-primary rounded-lg px-2.5 py-1 flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            PAID ACCOUNT
          </span>
        </div>
        <div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
          <svg class="w-48 h-48 -rotate-45" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
      </div>

      <!-- Devices -->
      <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 shadow-sm space-y-4">
        <h3 class="font-bold text-on-surface text-sm flex items-center gap-2">
          <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
          Synchronized Devices
        </h3>
        <div class="space-y-3.5">
          {{range .Devices}}
          <div class="flex items-center justify-between text-xs">
            <div class="flex items-center gap-2.5 min-w-0">
              <div class="p-1.5 bg-surface-container-low border border-outline-variant/20 rounded-lg shrink-0">
                <svg class="w-4 h-4 {{if eq .Type "desktop"}}text-primary{{else}}text-outline{{end}}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  {{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
                  {{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
                  {{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
                </svg>
              </div>
              <span class="font-bold text-on-surface truncate pr-2">{{.Name}}</span>
            </div>
            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 shrink-0 {{if .Current}}bg-secondary/10 text-secondary{{else}}bg-surface-container text-outline{{end}}">
              <span class="w-1 h-1 rounded-full {{if .Current}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
              {{if .Current}}Online{{else}}Offline{{end}}
            </span>
          </div>
          {{end}}
        </div>
      </div>

      <!-- Danger Zone -->
      <div class="p-4 border border-error-container/40 rounded-2xl bg-error-container/5 space-y-3 text-xs" x-data="{ confirm: false }">
        <h4 class="font-bold text-error flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
          Reset Local State
        </h4>
        <p class="text-on-surface-variant">Resetting will clear all your locally loaded keystores, snippets, and connection cache buffers from the browser storage.</p>
        <button @click="if(confirm('Are you sure you want to flush all local storage configurations?')) { localStorage.clear(); alert('Workspace storage cleared successfully.'); window.location.reload(); }"
                class="w-full py-2 border border-error/30 rounded-xl font-bold text-error hover:bg-error/10 transition-colors">
          Flush All App State
        </button>
      </div>

    </div>
  </div>
</div>
{{end}}