{% extends "base.html" %} {% block title %}Settings - Kinetic Sand Table{%
endblock %}

{% block additional_styles %}
/* Dark mode styles for settings page */
.dark .bg-white {
  background-color: #262626;
}
.dark .text-slate-900 {
  color: #e5e5e5;
}
.dark .text-slate-800 {
  color: #e5e5e5;
}
.dark .text-slate-700 {
  color: #d1d5db;
}
.dark .text-slate-600 {
  color: #9ca3af;
}
.dark .text-slate-500 {
  color: #9ca3af;
}
.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 {
  background-color: #262626;
  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: #262626;
  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;
}
{% 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"
    >
      Custom Clear Patterns
    </h2>
    <div class="px-6 py-5 space-y-6">
      <p class="text-sm text-slate-600">
        Customize the clear patterns used when transitioning between patterns. The idea here is for you to have some flexibility to choose clear patterns to distribute your sand evenly.
      </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 Clear Patterns</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"
    >
      Clearing Pattern Speed
    </h2>
    <div class="px-6 py-5 space-y-6">
      <p class="text-sm text-slate-600">
        Set a custom speed for clearing patterns. This allows you to run clearing patterns at a different speed than regular patterns. If this is set, the speed will be used but won't be updated in the pattern preivew. 
      </p>
      
      <div class="flex flex-col gap-1.5">
        <label for="clearPatternSpeedInput" class="text-slate-700 text-sm font-medium leading-normal">
          Clearing 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="200"
            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>
    </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"
    >
      WLED Configuration
    </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"
          >IP Address</span
        >
        <div class="flex gap-3 items-center">
          <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>
          <button
            id="saveWledConfig"
            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 Configuration</span>
          </button>
        </div>
        <p class="text-xs text-slate-500 mt-2">
          Enter the IP address of your WLED controller.
        </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"
    >
      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 %}