{% extends "base.html" %}
{% block title %}UI Settings{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">UI Settings</li>
  </ol>
</nav>
{% endblock %}
{% block content %}
<div class="mb-6">
  <h1 class="text-2xl font-bold">UI Settings</h1>
  <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Customize your interface preferences</p>
</div>


<div x-data='{
  navStyle: "{{ navigation_style }}",
  theme: "{{ color_theme }}",
  colors: {{ color_map|safe }},
  get previewColor() {
    return this.colors[this.theme] || "#3b82f6";
  }
}'>
<form method="post">
  {% csrf_token %}

  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 mb-6 overflow-hidden">
    <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-600">
      <i class="fas fa-bars text-blue-600 dark:text-blue-400"></i>
      <div>
        <h3 class="text-base font-semibold text-gray-900 dark:text-white">Navigation Layout</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Choose your preferred navigation style</p>
      </div>
    </div>
    <div class="px-6 py-5 space-y-4">
      <label class="flex items-start gap-4 p-4 rounded-xl border cursor-pointer transition-all" :class="navStyle === &apos;sidebar&apos; ? &apos;border-blue-500 bg-blue-50/50 dark:bg-blue-900/10&apos; : &apos;border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-600&apos;">
        <input type="radio" name="navigation_style" value="sidebar" class="mt-1" x-model="navStyle">
        <div>
          <div class="font-medium text-sm text-gray-900 dark:text-white">Sidebar Navigation</div>
          <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Classic sidebar layout (recommended for desktop)</div>
        </div>
      </label>
      <label class="flex items-start gap-4 p-4 rounded-xl border cursor-pointer transition-all" :class="navStyle === &apos;top&apos; ? &apos;border-blue-500 bg-blue-50/50 dark:bg-blue-900/10&apos; : &apos;border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-600&apos;">
        <input type="radio" name="navigation_style" value="top" class="mt-1" x-model="navStyle">
        <div>
          <div class="font-medium text-sm text-gray-900 dark:text-white">Top Navigation</div>
          <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Modern top navigation bar (great for tablets)</div>
        </div>
      </label>
    </div>
  </div>

  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 mb-6 overflow-hidden">
    <div class="flex items-center gap-3 px-6 py-4 border-b border-gray-100 dark:border-gray-600">
      <i class="fas fa-palette text-blue-600 dark:text-blue-400"></i>
      <div>
        <h3 class="text-base font-semibold text-gray-900 dark:text-white">Color Theme</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Personalize your interface colors</p>
      </div>
    </div>
    <div class="px-6 py-5 space-y-4">
      <div class="flex flex-wrap gap-3">
        {% for name, hex, label in color_palette %}
        <button type="button"
          @click="theme = '{{ name }}'"
          class="relative w-9 h-9 rounded-full border-2 transition-all hover:scale-110 flex-shrink-0"
          :class="theme === '{{ name }}' ? 'border-gray-900 dark:border-white ring-2 ring-gray-900 dark:ring-white' : 'border-gray-200 dark:border-gray-600'"
          style="background-color: {{ hex }}"
          title="{{ label }}">
          <svg x-show="theme === '{{ name }}'" class="absolute inset-0 w-full h-full p-1.5 text-white drop-shadow" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
        </button>
        {% endfor %}
      </div>
      <input type="hidden" name="color_theme" x-model="theme">
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-full border-2 border-gray-200 dark:border-gray-600" :style="&apos;background-color: &apos; + previewColor"></div>
        <div class="text-sm text-gray-500 dark:text-gray-400"><span class="font-medium text-gray-900 dark:text-white" x-text="theme.charAt(0).toUpperCase() + theme.slice(1)"></span> — Primary accent color</div>
      </div>
    </div>
  </div>

  <div class="flex justify-end">
    <button type="submit" class="dk-btn dk-btn-primary"><i class="fas fa-save"></i> Save Settings</button>
  </div>
</form>
</div>

{% endblock %}