dune-weaver/templates/settings.html

{% extends "base.html" %} {% block title %}Settings - {{ app_name or 'Dune Weaver' }}{%
endblock %}

{% block additional_styles %}
/* Dark mode styles for settings page */
.dark .bg-white {
  background-color: #262626;
}
.dark .text-slate-900 {
  color: #ffffff;
}
.dark .text-slate-800 {
  color: #f8fafc;
}
.dark .text-slate-700 {
  color: #f1f5f9;
}
.dark .text-slate-600 {
  color: #e2e8f0;
}
.dark .text-slate-500 {
  color: #e2e8f0;
}

/* Label overrides for better visibility */
.dark label {
  color: #f1f5f9;
}
.dark .border-slate-200 {
  border-color: #404040;
}
.dark .border-slate-300 {
  border-color: #404040;
}
.dark .divide-slate-100 {
  border-color: #404040;
}
.dark .bg-slate-50 {
  background-color: #262626;
}
.dark .hover\:bg-slate-50:hover {
  background-color: #404040;
}
.dark .bg-slate-100 {
  background-color: #404040;
}
.dark .form-input,
.dark input[type="number"],
.dark input[type="text"] {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-input::placeholder {
  color: #9ca3af;
}
.dark .form-input:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark .form-select {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-select:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark .focus\:ring-sky-500:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:border-sky-500:focus {
  border-color: #0c7ff2;
}
.dark .hover\:text-gray-700:hover {
  color: #e5e5e5;
}
.dark .text-gray-400 {
  color: #9ca3af;
}

/* Autocomplete suggestions dark mode */
.dark #clearFromInSuggestions,
.dark #clearFromOutSuggestions {
  background-color: #262626;
  border-color: #404040;
}
.dark .suggestion-item {
  color: #e5e5e5;
}
.dark .suggestion-item:hover {
  background-color: #404040;
}
.dark .suggestion-item.selected {
  background-color: #0c7ff2;
  color: white;
}

/* Light mode autocomplete styles */
.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  color: #1f2937;
  transition: background-color 0.15s;
}
.suggestion-item:hover {
  background-color: #f3f4f6;
}
.suggestion-item.selected {
  background-color: #0c7ff2;
  color: white;
}
.suggestion-item mark {
  background-color: #fef3c7;
  font-weight: 600;
}
.dark .suggestion-item mark {
  background-color: #92400e;
  color: #fef3c7;
}

/* Toggle switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0c7ff2;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0c7ff2;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Dark mode for switches */
.dark .slider {
  background-color: #404040;
}

.dark input:checked + .slider {
  background-color: #0c7ff2;
}

/* Spin animation for loading states */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Time slot specific styles */
.time-slot-item {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.15s;
}

.dark .time-slot-item {
  background-color: #1e293b;
  border-color: #475569;
}

.time-slot-item:hover {
  border-color: #cbd5e1;
}

.dark .time-slot-item:hover {
  border-color: #64748b;
}

/* Info box dark mode - grey theme */
.dark .bg-blue-50 {
  background-color: #1f1f1f;
}

.dark .border-blue-200 {
  border-color: #404040;
}

.dark .text-blue-600 {
  color: #e2e8f0;
}

.dark .text-blue-800 {
  color: #f1f5f9;
}

.dark .text-blue-700 {
  color: #e2e8f0;
}

/* Amber box dark mode - grey theme */
.dark .bg-amber-50 {
  background-color: #1f1f1f;
}

.dark .border-amber-200 {
  border-color: #404040;
}

.dark .text-amber-600 {
  color: #f1f5f9;
}
{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-4xl gap-8 pt-2 pb-[75px]">
  <div
    class="flex flex-wrap justify-between items-center p-4 bg-white rounded-xl shadow-sm mt-2 sm:mt-8"
  >
    <h1
      class="text-slate-900 tracking-tight text-2xl sm:text-3xl font-bold leading-tight"
    >
      Settings
    </h1>
  </div>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Device Connection
    </h2>
    <div class="divide-y divide-slate-100">
      <div
        class="flex items-center gap-4 px-6 py-5 hover:bg-slate-50 transition-colors"
      >
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">usb_off</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Status
          </p>
          <p
            id="serialStatus"
            class="text-red-500 text-sm font-medium leading-normal"
          >
            Disconnected
          </p>
        </div>
        <button
          id="disconnectButton"
          class="text-xs font-medium text-slate-600 bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1.5 rounded-md transition-colors"
          hidden
        >
          Disconnect
        </button>
      </div>
      <div id="portSelectionDiv" class="px-6 py-5 space-y-4">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal"
            >Available Serial Ports</span
          >
          <div class="flex gap-3 items-center">
            <select
              id="portSelect"
              class="form-select flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors "
            >
              <option value="">Select a port...</option>
            </select>
            <button
              id="connectButton"
              class="flex items-center justify-center gap-2 min-w-[100px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
            >
              <span class="material-icons text-lg">cable</span>
              <span class="truncate">Connect</span>
            </button>
          </div>
          <p class="text-xs text-slate-500 mt-2">
            Select a port and click 'Connect' to establish a connection.
          </p>
        </label>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Desert Compass
    </h2>
    <div class="px-6 py-5 space-y-6">
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal flex items-center gap-2">
            <span class="material-icons text-slate-600">explore</span>
            Enable Desert Compass (Raspberry Pi Only)
          </h3>
          <p class="text-xs text-slate-500 mt-1">
            Use a reed switch and magnet to establish a precise angular reference point for the table's rotation.
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="angularHomingToggle">
          <span class="slider round"></span>
        </label>
      </div>

      <!-- GPIO Pin Selection (shown when Desert Compass is enabled) -->
      <div id="gpioSelectionContainer" class="space-y-2" style="display: none;">
        <label for="gpioInput" class="text-sm font-medium text-slate-700 flex items-center gap-2">
          <span class="material-icons text-slate-600 text-base">settings_input_component</span>
          Reed Switch GPIO Pin
        </label>
        <input
          type="number"
          id="gpioInput"
          min="2"
          max="27"
          step="1"
          value="18"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-sm"
          placeholder="18"
        />
        <p class="text-xs text-slate-500">
          GPIO pin number (BCM numbering) where the reed switch is connected. Common pins: 17, 18, 22, 23, 24, 25, 27.
        </p>
      </div>

      <!-- Invert State Toggle (shown when Desert Compass is enabled) -->
      <div id="invertStateContainer" class="space-y-2" style="display: none;">
        <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
          <div class="flex-1">
            <label for="invertStateToggle" class="text-sm font-medium text-slate-700 flex items-center gap-2 cursor-pointer">
              <span class="material-icons text-slate-600 text-base">swap_vert</span>
              Invert Sensor Logic
            </label>
            <p class="text-xs text-slate-500 mt-1">
              Enable if your reed switch is triggered when LOW instead of HIGH (normally closed configuration).
            </p>
          </div>
          <label class="switch">
            <input type="checkbox" id="invertStateToggle">
            <span class="slider round"></span>
          </label>
        </div>
      </div>

      <!-- Compass Calibration (shown when Desert Compass is enabled) -->
      <div id="angularOffsetContainer" class="space-y-2" style="display: none;">
        <label for="angularOffsetInput" class="text-sm font-medium text-slate-700 flex items-center gap-2">
          <span class="material-icons text-slate-600 text-base">straighten</span>
          Compass Reference Point (degrees)
        </label>
        <input
          type="number"
          id="angularOffsetInput"
          min="0"
          max="360"
          step="0.1"
          value="0"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 text-sm"
          placeholder="0.0"
        />
        <p class="text-xs text-slate-500">
          Set the angle (in degrees) where your magnet/sensor is physically mounted. 0° = East, increases clockwise (90° = South, 180° = West, 270° = North).
        </p>
      </div>

      <div id="angularHomingInfo" class="text-xs text-slate-600 bg-blue-50 border border-blue-200 rounded-lg p-3" style="display: none;">
        <div class="flex items-start gap-2">
          <span class="material-icons text-blue-600 text-base">info</span>
          <div>
            <p class="font-medium text-blue-800">How Desert Compass Works:</p>
            <ul class="mt-1 space-y-1 text-blue-700">
              <li>• After radial calibration, the arm moves to the table's edge</li>
              <li>• The table rotates until the magnet triggers the reed switch</li>
              <li>• This position becomes the angular reference point based on your compass setting</li>
              <li>• Requires Raspberry Pi with reed switch connected to selected GPIO pin</li>
              <li>• Standard wiring: Reed switch to 3.3V (triggered = HIGH)</li>
              <li>• Inverted wiring: Reed switch to ground (triggered = LOW)</li>
              <li>• Uses BCM GPIO numbering (not physical pin numbers)</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="flex justify-end">
        <button
          id="saveHomingConfig"
          class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
        >
          <span class="material-icons text-lg">save</span>
          <span class="truncate">Save Compass Config</span>
        </button>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Application Settings
    </h2>
    <div class="px-6 py-5 space-y-6">
      <label class="flex flex-col gap-1.5">
        <span class="text-slate-700 text-sm font-medium leading-normal"
          >Application Name</span
        >
        <div class="flex gap-3 items-center">
          <div class="relative flex-1">
            <input
              id="appNameInput"
              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="e.g., Dune Weaver"
              value="Dune Weaver"
            />
            <button
              type="button"
              onclick="document.getElementById('appNameInput').value='Dune Weaver';"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
              aria-label="Reset to default"
              title="Reset to default"
            >
              <span class="material-icons">restart_alt</span>
            </button>
          </div>
          <button
            id="saveAppName"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors flex-shrink-0"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Name</span>
          </button>
        </div>
        <p class="text-xs text-slate-500 mt-2">
          This name will appear in the browser tab and at the top of every page.
        </p>
      </label>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Pattern Clearing
    </h2>
    <div class="px-6 py-5 space-y-6">
      <p class="text-sm text-slate-600">
        Customize the clearing behavior used when transitioning between patterns. Set custom patterns and speed to control how sand is distributed.
      </p>

      <!-- Clearing Speed Section -->
      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
        <h3 class="text-slate-800 text-base font-semibold">Clearing Speed</h3>
        <p class="text-sm text-slate-600">
          Set a custom speed for clearing patterns. Leave empty to use the default pattern speed. This allows clearing patterns to run at a different speed than regular patterns.
        </p>
        <div class="flex flex-col gap-1.5">
          <label for="clearPatternSpeedInput" class="text-slate-700 text-sm font-medium leading-normal">
            Speed (steps per minute)
          </label>
          <div class="flex gap-3 items-center">
            <input
              id="clearPatternSpeedInput"
              type="number"
              min="50"
              max="2000"
              step="50"
              class="form-input flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
              placeholder="Default (use pattern speed)"
              value=""
            />
            <button
              id="saveClearSpeed"
              class="flex items-center justify-center gap-2 min-w-[120px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
            >
              <span class="material-icons text-lg">save</span>
              <span class="truncate">Save Speed</span>
            </button>
          </div>
          <div id="effectiveClearSpeed" class="text-xs text-slate-500 mt-1"></div>
        </div>
      </div>

      <!-- Custom Patterns Section -->
      <div class="bg-slate-50 rounded-lg p-4 space-y-4">
        <h3 class="text-slate-800 text-base font-semibold">Custom Clear Patterns</h3>
        <p class="text-sm text-slate-600">
          Choose specific patterns to use when clearing. Leave empty to use the default clearing behavior.
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="flex flex-col gap-1.5">
          <label for="customClearFromInInput" class="text-slate-700 text-sm font-medium leading-normal">Clear From Center Pattern</label>
          <div class="relative">
            <input
              id="customClearFromInInput"
              type="text"
              class="form-input w-full resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="Type to search patterns or leave empty for default"
              autocomplete="off"
            />
            <button
              type="button"
              id="clearFromInClear"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hidden"
              aria-label="Clear selection"
              title="Clear selection"
            >
              <span class="material-icons text-xl">close</span>
            </button>
            <div id="clearFromInSuggestions" class="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto hidden"></div>
          </div>
          <p class="text-xs text-slate-500 mt-1">
            Pattern to use when clearing from the center outward.
          </p>
        </div>

        <div class="flex flex-col gap-1.5">
          <label for="customClearFromOutInput" class="text-slate-700 text-sm font-medium leading-normal">Clear From Perimeter Pattern</label>
          <div class="relative">
            <input
              id="customClearFromOutInput"
              type="text"
              class="form-input w-full resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="Type to search patterns or leave empty for default"
              autocomplete="off"
            />
            <button
              type="button"
              id="clearFromOutClear"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hidden"
              aria-label="Clear selection"
              title="Clear selection"
            >
              <span class="material-icons text-xl">close</span>
            </button>
            <div id="clearFromOutSuggestions" class="absolute z-10 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-y-auto hidden"></div>
          </div>
          <p class="text-xs text-slate-500 mt-1">
            Pattern to use when clearing from the perimeter inward.
          </p>
        </div>
      </div>

        <div class="flex justify-end">
          <button
            id="saveClearPatterns"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Patterns</span>
          </button>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      LED Controller Configuration
    </h2>
    <div class="px-6 py-5 space-y-6">
      <!-- LED Provider Selection -->
      <div class="flex flex-col gap-2">
        <span class="text-slate-700 text-sm font-medium leading-normal">LED Provider</span>
        <div class="flex gap-3">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="none" id="ledProviderNone" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">None</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="wled" id="ledProviderWled" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">WLED</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="ledProvider" value="dw_leds" id="ledProviderDwLeds" class="w-4 h-4 text-sky-600 border-slate-300 focus:ring-sky-500">
            <span class="text-sm text-slate-700">DW LEDs (Local GPIO)</span>
          </label>
        </div>
        <p class="text-xs text-slate-500">
          Select your LED control system (settings are mutually exclusive)
        </p>
      </div>

      <!-- WLED Configuration (shown when WLED is selected) -->
      <div id="wledConfig" class="flex flex-col gap-4 hidden">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">WLED IP Address</span>
          <div class="relative flex-1">
            <input
              id="wledIpInput"
              class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 pr-10 text-base font-normal leading-normal transition-colors"
              placeholder="e.g., 192.168.1.100"
              value=""
            />
            <button
              type="button"
              onclick="document.getElementById('wledIpInput').value='';"
              class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700"
              aria-label="Clear WLED IP"
            >
              <span class="material-icons">close</span>
            </button>
          </div>
          <p class="text-xs text-slate-500">
            Enter the IP address of your WLED controller
          </p>
        </label>
      </div>

      <!-- DW LEDs Configuration (shown when DW LEDs is selected) -->
      <div id="dwLedsConfig" class="flex flex-col gap-4 hidden">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
          <div class="flex items-start gap-2">
            <span class="material-icons text-blue-600 text-base">info</span>
            <div class="text-xs text-blue-700">
              <p class="font-medium text-blue-800">Supported LED Strips: WS281x Only</p>
              <p class="mt-1">Compatible with WS2811, WS2812, WS2812B, WS2813, WS2815 (12V), and other WS281x RGB LED strips. RGBW strips (SK6812, SK6812W) are not supported.</p>
            </div>
          </div>
        </div>

        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Number of LEDs</span>
          <input
            id="dwLedNumLeds"
            type="number"
            class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
            placeholder="60"
            value="60"
            min="1"
            max="1000"
          />
          <p class="text-xs text-slate-500">
            Total number of LEDs in your WS281x strip
          </p>
        </label>
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">GPIO Pin</span>
          <select
            id="dwLedGpioPin"
            class="form-select flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-normal leading-normal transition-colors"
          >
            <option value="12">GPIO 12 (PWM0)</option>
            <option value="13">GPIO 13 (PWM1)</option>
            <option value="18">GPIO 18 (PWM0)</option>
            <option value="19">GPIO 19 (PWM1)</option>
          </select>
          <p class="text-xs text-slate-500">
            Select a PWM-capable GPIO pin for WS281x timing
          </p>
        </label>
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Pixel Color Order (WS281x)</span>
          <select
            id="dwLedPixelOrder"
            class="form-select flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-normal leading-normal transition-colors"
          >
            <option value="GRB" selected>GRB - WS2812/WS2812B (most common)</option>
            <option value="RGB">RGB - WS2815/WS2811 and some variants</option>
            <option value="BGR">BGR - Some WS2811 variants</option>
            <option value="RBG">RBG - Rare variant</option>
            <option value="GBR">GBR - Rare variant</option>
            <option value="BRG">BRG - Rare variant</option>
          </select>
          <p class="text-xs text-slate-500">
            Most WS2812B and WS2815 strips use GRB. WS2811 often uses RGB. If colors appear wrong, try different orders.
          </p>
        </label>
      </div>

      <!-- Save Button -->
      <button
        id="saveLedConfig"
        class="flex items-center justify-center gap-2 w-full sm:w-auto cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
      >
        <span class="material-icons text-lg">save</span>
        <span class="truncate">Save LED Configuration</span>
      </button>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Auto-play on Boot
    </h2>
    <div class="px-6 py-5 space-y-6">
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Auto-play on Boot</h3>
          <p class="text-xs text-slate-500 mt-1">
            Automatically start playing a selected playlist when the system boots up.
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="auto_playModeToggle">
          <span class="slider round"></span>
        </label>
      </div>
      
      <div id="auto_playSettings" class="space-y-4" style="display: none;">
        <label class="flex flex-col gap-1.5">
          <span class="text-slate-700 text-sm font-medium leading-normal">Startup Playlist</span>
          <select
            id="auto_playPlaylistSelect"
            class="form-select flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
          >
            <option value="">Select a playlist...</option>
          </select>
          <p class="text-xs text-slate-500 mt-1">
            Choose which playlist to automatically play when the system starts.
          </p>
        </label>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Run Mode</span>
            <select
              id="auto_playRunModeSelect"
              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
            >
              <option value="single">Single (play once)</option>
              <option value="loop">Loop (repeat forever)</option>
            </select>
            <p class="text-xs text-slate-500 mt-1">
              How to run the playlist when it finishes.
            </p>
          </label>

          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Pause Between Patterns (seconds)</span>
            <input
              id="auto_playPauseTimeInput"
              type="number"
              min="0"
              step="0.5"
              class="form-input resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
              placeholder="5.0"
            />
            <p class="text-xs text-slate-500 mt-1">
              Time to wait between each pattern (0 or more seconds).
            </p>
          </label>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label class="flex flex-col gap-1.5">
            <span class="text-slate-700 text-sm font-medium leading-normal">Clear Pattern</span>
            <select
              id="auto_playClearPatternSelect"
              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
            >
              <option value="none">None</option>
              <option value="adaptive">Adaptive</option>
              <option value="clear_from_in">Clear From Center</option>
              <option value="clear_from_out">Clear From Perimeter</option>
              <option value="clear_sideway">Clear Sideway</option>
              <option value="random">Random</option>
            </select>
            <p class="text-xs text-slate-500 mt-1">
              Pattern to run before each main pattern.
            </p>
          </label>

          <div class="flex items-center justify-between">
            <div class="flex-1">
              <h4 class="text-slate-700 text-sm font-medium leading-normal">Shuffle Playlist</h4>
              <p class="text-xs text-slate-500 mt-1">
                Randomize the order of patterns in the playlist.
              </p>
            </div>
            <label class="switch">
              <input type="checkbox" id="auto_playShuffleToggle">
              <span class="slider round"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Still Sands
    </h2>
    <div class="px-6 py-5 space-y-6">
      <div class="flex items-center justify-between">
        <div class="flex-1">
          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Still Sands</h3>
          <p class="text-xs text-slate-500 mt-1">
            Automatically bring the sands to rest during specified time periods.
          </p>
        </div>
        <label class="switch">
          <input type="checkbox" id="scheduledPauseToggle">
          <span class="slider round"></span>
        </label>
      </div>

      <div id="scheduledPauseSettings" class="space-y-4" style="display: none;">
        <!-- WLED Control Option -->
        <div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
          <div class="flex items-center justify-between">
            <div class="flex-1">
              <h4 class="text-slate-800 text-sm font-medium flex items-center gap-2">
                <span class="material-icons text-amber-600 text-base">lightbulb</span>
                Control WLED Lights
              </h4>
              <p class="text-xs text-slate-600 mt-1">
                Turn off WLED lights during still periods for complete rest
              </p>
            </div>
            <label class="switch">
              <input type="checkbox" id="stillSandsWledControl">
              <span class="slider round"></span>
            </label>
          </div>
        </div>

        <div class="bg-slate-50 rounded-lg p-4 space-y-4">
          <div class="flex items-center justify-between">
            <h4 class="text-slate-800 text-base font-semibold">Still Periods</h4>
            <button
              id="addTimeSlotButton"
              class="flex items-center justify-center gap-2 cursor-pointer rounded-lg h-9 px-3 bg-sky-600 hover:bg-sky-700 text-white text-xs font-medium leading-normal tracking-[0.015em] transition-colors"
            >
              <span class="material-icons text-base">add</span>
              <span>Add Still Period</span>
            </button>
          </div>
          <p class="text-sm text-slate-600">
            Define time periods when the sands should rest in stillness. Patterns will resume automatically when still periods end.
          </p>

          <div id="timeSlotsContainer" class="space-y-3">
            <!-- Time slots will be dynamically added here -->
          </div>

          <div class="text-xs text-slate-500 bg-blue-50 border border-blue-200 rounded-lg p-3">
            <div class="flex items-start gap-2">
              <span class="material-icons text-blue-600 text-base">info</span>
              <div>
                <p class="font-medium text-blue-800">Important Notes:</p>
                <ul class="mt-1 space-y-1 text-blue-700">
                  <li>• Times are based on your system's local time zone</li>
                  <li>• Currently running patterns will pause immediately when entering a still period</li>
                  <li>• Patterns will resume automatically when exiting a still period</li>
                  <li>• Still periods that span midnight (e.g., 22:00 to 06:00) are supported</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="flex justify-end">
          <button
            id="savePauseSettings"
            class="flex items-center justify-center gap-2 min-w-[140px] cursor-pointer rounded-lg h-10 px-4 bg-sky-600 hover:bg-sky-700 text-white text-sm font-medium leading-normal tracking-[0.015em] transition-colors"
          >
            <span class="material-icons text-lg">save</span>
            <span class="truncate">Save Still Sands</span>
          </button>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
    <h2
      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
    >
      Software Version
    </h2>
    <div class="divide-y divide-slate-100">
      <div class="flex items-center gap-4 px-6 py-5">
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">terminal</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Current Version
          </p>
          <p id="currentVersionText" class="text-slate-500 text-sm font-normal leading-normal">Loading...</p>
        </div>
      </div>
      <div class="flex items-center gap-4 px-6 py-5">
        <div
          class="text-slate-600 flex items-center justify-center rounded-lg bg-slate-100 shrink-0 size-12"
        >
          <span class="material-icons text-3xl">system_update</span>
        </div>
        <div class="flex-1">
          <p class="text-slate-800 text-base font-medium leading-normal">
            Latest Version
          </p>
          <p id="latestVersionText" class="text-slate-500 text-sm font-normal leading-normal">Checking...</p>
        </div>
        <button
          id="updateSoftware"
          class="flex items-center justify-center gap-1.5 min-w-[84px] cursor-pointer rounded-lg h-9 px-3 bg-gray-400 text-white text-xs font-medium leading-normal tracking-[0.015em] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          disabled
        >
          <span id="updateIcon" class="material-icons text-base">download</span>
          <span id="updateText" class="truncate">Update</span>
        </button>
      </div>
    </div>
  </section>
</div>
{% endblock %} {% block scripts %}
<script src="/static/js/settings.js"></script>
{% endblock %}