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

{% block additional_head %}
<link rel="stylesheet" href="/static/css/coloris.min.css">
{% endblock %}

{% block additional_styles %}
/* Dark mode styles for LED page */
.dark .bg-white {
  background-color: #262626;
}
.dark .bg-gray-100 {
  background-color: #1f1f1f;
}
.dark .border-slate-200 {
  border-color: #404040;
}
.dark .border-slate-300 {
  border-color: #404040;
}
.dark .text-gray-500 {
  color: #9ca3af;
}
.dark .text-gray-700 {
  color: #d1d5db;
}
.dark .text-slate-500 {
  color: #e2e8f0;
}
.dark .text-slate-600 {
  color: #f1f5f9;
}
.dark .text-slate-700 {
  color: #f8fafc;
}
.dark .text-slate-800 {
  color: #ffffff;
}
.dark .text-slate-900 {
  color: #ffffff;
}
.dark .bg-slate-50 {
  background-color: #262626;
}

/* Specific label overrides for better visibility */
.dark label {
  color: #f1f5f9;
}

/* Form elements */
.dark input[type="range"] {
  background-color: #404040;
}
.dark input[type="number"],
.dark input[type="text"]:not(.effect-color-picker) {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark select,
.dark .form-select {
  background-color: #1f1f1f;
  border-color: #404040;
  color: #e5e5e5;
}
.dark select option {
  background-color: #262626;
  color: #e5e5e5;
}

/* Status messages - keep backgrounds but adjust borders */
.dark .bg-green-50 {
  background-color: #14532d;
}
.dark .border-green-200 {
  border-color: #166534;
}
.dark .text-green-700 {
  color: #86efac;
}
.dark .bg-red-50 {
  background-color: #450a0a;
}
.dark .border-red-200 {
  border-color: #991b1b;
}
.dark .text-red-700 {
  color: #fca5a5;
}
.dark .bg-amber-50 {
  background-color: #451a03;
}
.dark .border-amber-200 {
  border-color: #92400e;
}
.dark .text-amber-700 {
  color: #fcd34d;
}
.dark .bg-blue-50 {
  background-color: #1f1f1f;
}
.dark .border-blue-200 {
  border-color: #404040;
}
.dark .text-blue-700 {
  color: #e2e8f0;
}
.dark .text-blue-800 {
  color: #f1f5f9;
}

/* Iframe border */
.dark iframe {
  border-color: #404040;
}

/* Hide hex input in Coloris picker */
.clr-field input {
  display: none !important;
}
.clr-field button {
  display: none !important;
}

/* Hide text inside the circular color pickers */
.effect-color-picker {
  color: transparent !important;
  text-indent: -9999px;
  font-size: 0;
  caret-color: transparent;
}
{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-4xl gap-0 pt-2 pb-[75px]">
  <!-- Not Configured State -->
  <section id="led-not-configured" class="bg-white rounded-xl shadow-sm overflow-hidden pt-4 sm:pt-0 h-full hidden">
    <div class="flex flex-col items-center px-0 py-0 h-full">
      <div class="w-full h-full max-w-5xl flex flex-col overflow-hidden">
        <div class="w-full p-8 text-center">
          <div class="flex flex-col items-center gap-4">
            <span class="material-icons text-6xl text-gray-500">lightbulb</span>
            <h2 class="text-2xl font-semibold text-gray-700">LED Controller Not Configured</h2>
            <p class="text-gray-500 max-w-md">Please configure your LED controller (WLED or DW LEDs) in the Settings page.</p>
            <a href="/settings" class="mt-4 flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-blue-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
              <span class="material-icons">settings</span>
              Go to Settings
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- WLED iframe -->
  <section id="wled-container" class="bg-white rounded-xl shadow-sm overflow-hidden pt-4 sm:pt-0 h-full hidden">
    <div class="flex flex-col items-center px-0 py-0 h-full">
      <div class="w-full h-full max-w-5xl flex flex-col overflow-hidden">
        <iframe id="wled-frame"
          src=""
          class="h-full w-full rounded-lg border border-slate-200"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </div>
    </div>
  </section>

  <!-- DW LEDs Controls -->
  <section id="dw-leds-container" class="bg-white rounded-xl shadow-sm overflow-hidden hidden">
    <div class="px-6 py-5 space-y-6">
      <h2 class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em]">
        DW LEDs Control
      </h2>

      <!-- Connection Status -->
      <div id="dw-leds-status" class="p-4 rounded-lg bg-gray-100 border border-slate-200">
        <div class="flex items-center gap-2">
          <span class="material-icons text-gray-500">info</span>
          <span class="text-sm text-gray-700">Checking connection...</span>
        </div>
      </div>

      <!-- Power and Brightness Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <!-- Power Control -->
        <div class="flex flex-col gap-3">
          <h3 class="text-slate-800 text-base font-semibold">Power</h3>
          <button id="dw-leds-power-toggle" class="flex items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-green-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2">
            <span class="material-icons">power_settings_new</span>
            <span id="dw-leds-power-text">Turn ON</span>
          </button>
        </div>

        <!-- Brightness Control -->
        <div class="flex flex-col gap-3">
          <div class="flex items-center justify-between">
            <h3 class="text-slate-800 text-base font-semibold">Brightness</h3>
            <span id="dw-leds-brightness-value" class="text-sm font-medium text-slate-600">35%</span>
          </div>
          <input type="range" id="dw-leds-brightness" min="0" max="100" value="35" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
        </div>
      </div>

      <!-- Effects and Palettes -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="flex flex-col gap-3">
          <h3 class="text-slate-800 text-base font-semibold">Effect</h3>
          <select id="dw-leds-effect-select" class="form-select w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-slate-900 focus:outline-0 focus:ring-2 focus:ring-blue-500">
            <option value="">Loading effects...</option>
          </select>
        </div>
        <div class="flex flex-col gap-3">
          <h3 class="text-slate-800 text-base font-semibold">Palette</h3>
          <select id="dw-leds-palette-select" class="form-select w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-slate-900 focus:outline-0 focus:ring-2 focus:ring-blue-500">
            <option value="">Loading palettes...</option>
          </select>
        </div>
      </div>

      <!-- Speed and Intensity -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <!-- Speed Control -->
        <div class="flex flex-col gap-3">
          <div class="flex items-center justify-between">
            <h3 class="text-slate-800 text-base font-semibold">Speed</h3>
            <span id="dw-leds-speed-value" class="text-sm font-medium text-slate-600">128</span>
          </div>
          <input type="range" id="dw-leds-speed" min="0" max="255" value="128" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
        </div>

        <!-- Intensity Control -->
        <div class="flex flex-col gap-3">
          <div class="flex items-center justify-between">
            <h3 class="text-slate-800 text-base font-semibold">Intensity</h3>
            <span id="dw-leds-intensity-value" class="text-sm font-medium text-slate-600">128</span>
          </div>
          <input type="range" id="dw-leds-intensity" min="0" max="255" value="128" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
        </div>
      </div>

      <!-- Effect Color Slots -->
      <div class="flex items-center gap-4">
        <h3 class="text-slate-800 text-base font-semibold">Effect Colors:</h3>
        <div class="flex items-center gap-2">
          <label class="text-xs font-medium text-slate-600">Slot 1</label>
          <input type="text" id="dw-leds-color1" value="#ff0000" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs font-medium text-slate-600">Slot 2</label>
          <input type="text" id="dw-leds-color2" value="#000000" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
        </div>
        <div class="flex items-center gap-2">
          <label class="text-xs font-medium text-slate-600">Slot 3</label>
          <input type="text" id="dw-leds-color3" value="#0000ff" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
        </div>
      </div>

      <!-- Effect Settings -->
      <div class="flex flex-col gap-6 pt-4 border-t border-slate-200">
        <div>
          <h3 class="text-slate-800 text-base font-semibold">Automation Settings</h3>
          <p class="text-xs text-slate-500 mt-1">Configure LED effects to automatically activate when idle or playing patterns</p>
        </div>

        <!-- Playing Effect Configuration -->
        <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div class="flex items-center justify-between mb-3">
            <h4 class="text-slate-700 text-sm font-semibold flex items-center gap-2">
              <span class="material-icons text-green-600 text-lg">play_circle</span>
              Playing Effect
            </h4>
            <div class="flex gap-2">
              <button id="dw-leds-save-current-playing" class="flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-green-700 transition-colors focus:outline-none focus:ring-2 focus:ring-green-400">
                <span class="material-icons text-sm">save</span>
                Save Current
              </button>
              <button id="dw-leds-clear-playing" class="flex items-center gap-1.5 rounded-lg bg-gray-500 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400">
                <span class="material-icons text-sm">clear</span>
                Clear
              </button>
            </div>
          </div>

          <div id="playing-current-settings" class="text-xs text-slate-600 p-2 bg-white rounded border border-slate-200">
            <span class="font-medium">Current:</span> <span id="playing-settings-display">Not configured</span>
          </div>
        </div>

        <!-- Idle Configuration (Effect + Timeout) -->
        <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
          <div class="flex items-center justify-between mb-4">
            <h4 class="text-slate-700 text-sm font-semibold flex items-center gap-2">
              <span class="material-icons text-blue-600 text-lg">bedtime</span>
              Idle Configuration
            </h4>
          </div>

          <!-- Idle Effect -->
          <div class="mb-4 pb-4 border-b border-slate-200">
            <div class="flex items-center justify-between mb-3">
              <label class="text-xs font-medium text-slate-600">Idle Effect</label>
              <div class="flex gap-2">
                <button id="dw-leds-save-current-idle" class="flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-green-700 transition-colors focus:outline-none focus:ring-2 focus:ring-green-400">
                  <span class="material-icons text-sm">save</span>
                  Save Current
                </button>
                <button id="dw-leds-clear-idle" class="flex items-center gap-1.5 rounded-lg bg-gray-500 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400">
                  <span class="material-icons text-sm">clear</span>
                  Clear
                </button>
              </div>
            </div>
            <div id="idle-current-settings" class="text-xs text-slate-600 p-2 bg-white rounded border border-slate-200">
              <span class="font-medium">Current:</span> <span id="idle-settings-display">Not configured</span>
            </div>
          </div>

          <!-- Idle Timeout -->
          <div>
            <div class="flex items-center justify-between mb-3">
              <label class="text-xs font-medium text-slate-600 flex items-center gap-2">
                <span class="material-icons text-blue-600 text-base">schedule</span>
                Auto Turn Off
              </label>
              <label class="relative inline-flex items-center cursor-pointer" title="Enable automatic LED turn off after idle period">
                <input type="checkbox" id="dw-leds-idle-timeout-enabled" class="sr-only peer">
                <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
              </label>
            </div>

            <!-- Help text when disabled -->
            <div id="idle-timeout-disabled-help" class="hidden mb-3 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <div class="flex items-start gap-2">
                <span class="material-icons text-blue-600 text-sm">info</span>
                <p class="text-xs text-blue-700">
                  <span class="font-semibold">Enable the toggle above</span> to automatically turn off LEDs after a period of inactivity.
                </p>
              </div>
            </div>

            <div id="idle-timeout-settings" class="space-y-3 transition-opacity duration-200">
              <div>
                <label class="block text-xs text-slate-500 mb-2">Turn off LEDs after</label>
                <div class="flex items-center gap-3">
                  <input type="number" id="dw-leds-idle-timeout-minutes" min="1" max="1440" value="30"
                         class="flex-1 rounded-lg border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                  <span class="text-sm text-slate-600 whitespace-nowrap">minutes idle</span>
                </div>
              </div>

              <div id="idle-timeout-remaining" class="text-xs text-slate-600 p-2 bg-white rounded border border-slate-200 hidden">
                <span class="font-medium">Time remaining:</span> <span id="idle-timeout-remaining-display">--</span>
              </div>

              <button id="dw-leds-save-idle-timeout" class="w-full flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400">
                <span class="material-icons text-base">save</span>
                Save Timeout Settings
              </button>
            </div>
          </div>
        </div>

        <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">How to use:</p>
              <ul class="mt-1 space-y-1 list-disc list-inside">
                <li>Adjust LED settings above (effect, palette, speed, intensity, colors)</li>
                <li>Click "Save Current" to capture current settings for automation</li>
                <li>Click "Clear" to turn off automation for that state</li>
                <li>Settings are applied automatically when table changes state</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</div>

<script src="/static/js/coloris.min.js"></script>
<script src="/static/js/led-control.js"></script>
{% endblock %}