{% extends "base.html" %}
{% block title %}Settings - neTV{% endblock %}

{% block head_extra %}
<style>
@keyframes spin { to { transform: rotate(360deg); } }
.refresh-btn.active { background-color: rgb(37, 99, 235); pointer-events: none; }
.refresh-btn .spinner { display: none; width: 0.75em; height: 0.75em; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 0.25em; }
.refresh-btn.active .spinner { display: inline-block; }
</style>
{% endblock %}

{% block content %}
<div class="max-w-2xl">
  <h2 class="text-3xl font-bold mb-6">Settings</h2>

  <h3 class="text-lg text-gray-400 mb-3">Client Settings</h3>

  <!-- Live TV Category Filter -->
  <div id="filters" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Live TV Filter</h3>
    <p class="text-sm text-gray-400 mb-3">Select and order which channel categories appear in the Live TV guide</p>
    <div class="grid grid-cols-2 gap-2 mb-2">
      <div class="relative">
        <input type="text" id="cat-search" placeholder="Filter categories..."
               class="w-full px-3 py-1 pr-7 bg-gray-700 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
        <button type="button" id="cat-search-clear" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white text-sm px-1 hidden">✕</button>
      </div>
      <div class="flex gap-2">
        <button type="button" id="cat-move-all-right" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Block All</button>
        <button type="button" id="cat-move-all-left" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Allow All</button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-2">
      <div>
        <div class="text-xs text-gray-400 mb-1">Available</div>
        <div id="available-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
        </div>
      </div>
      <div>
        <div class="text-xs text-gray-400 mb-1">Unavailable</div>
        <div id="unavailable-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
          {% for cat in live_categories %}
          {% set src_name = source_names.get(cat.source_id, '') %}
          <div class="cat-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500"
               draggable="true" data-id="{{ cat.category_id }}" title="{% if src_name %}[{{ src_name }}] {% endif %}{{ cat.category_name }}">
            {% if src_name %}<span class="text-gray-400">[{{ src_name }}]</span> {% endif %}{{ cat.category_name }}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Movies Category Filter -->
  <div id="vod-filters" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Movies Filter</h3>
    <p class="text-sm text-gray-400 mb-3">Select which movie categories appear on the Movies page</p>
    <div class="grid grid-cols-2 gap-2 mb-2">
      <div class="relative">
        <input type="text" id="vod-cat-search" placeholder="Filter categories..."
               class="w-full px-3 py-1 pr-7 bg-gray-700 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
        <button type="button" id="vod-cat-search-clear" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white text-sm px-1 hidden">✕</button>
      </div>
      <div class="flex gap-2">
        <button type="button" id="vod-cat-move-all-right" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Block All</button>
        <button type="button" id="vod-cat-move-all-left" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Allow All</button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-2">
      <div>
        <div class="text-xs text-gray-400 mb-1">Available</div>
        <div id="available-vod-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
        </div>
      </div>
      <div>
        <div class="text-xs text-gray-400 mb-1">Unavailable</div>
        <div id="unavailable-vod-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
          {% for cat in vod_categories %}
          {% set src_name = source_names.get(cat.source_id, '') %}
          <div class="vod-cat-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500"
               draggable="true" data-id="{{ cat.category_id }}" title="{% if src_name %}[{{ src_name }}] {% endif %}{{ cat.category_name }}">
            {% if src_name %}<span class="text-gray-400">[{{ src_name }}]</span> {% endif %}{{ cat.category_name }}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Series Category Filter -->
  <div id="series-filters" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Series Filter</h3>
    <p class="text-sm text-gray-400 mb-3">Select which series categories appear on the Series page</p>
    <div class="grid grid-cols-2 gap-2 mb-2">
      <div class="relative">
        <input type="text" id="series-cat-search" placeholder="Filter categories..."
               class="w-full px-3 py-1 pr-7 bg-gray-700 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
        <button type="button" id="series-cat-search-clear" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white text-sm px-1 hidden">✕</button>
      </div>
      <div class="flex gap-2">
        <button type="button" id="series-cat-move-all-right" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Block All</button>
        <button type="button" id="series-cat-move-all-left" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Allow All</button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-2">
      <div>
        <div class="text-xs text-gray-400 mb-1">Available</div>
        <div id="available-series-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
        </div>
      </div>
      <div>
        <div class="text-xs text-gray-400 mb-1">Unavailable</div>
        <div id="unavailable-series-cats" class="h-96 overflow-auto space-y-1 bg-gray-700 rounded p-2 border-2 border-dashed border-gray-600">
          {% for cat in series_categories %}
          {% set src_name = source_names.get(cat.source_id, '') %}
          <div class="series-cat-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500"
               draggable="true" data-id="{{ cat.category_id }}" title="{% if src_name %}[{{ src_name }}] {% endif %}{{ cat.category_name }}">
            {% if src_name %}<span class="text-gray-400">[{{ src_name }}]</span> {% endif %}{{ cat.category_name }}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Guide settings -->
  <div id="guide-settings" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Guide</h3>
    <div class="mb-4">
      <label class="flex items-center gap-3 cursor-pointer">
        <input type="checkbox" name="virtual_scroll" id="virtual-scroll" {% if virtual_scroll %}checked{% endif %}
               class="w-5 h-5 rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
        <span>Enable virtual scrolling for large channel lists</span>
      </label>
      <p class="text-xs text-gray-400 mt-1 ml-8">When enabled, only visible rows are loaded as you scroll. Disable for smoother scrolling with fewer channels.</p>
    </div>
    <div class="mb-4">
      <label class="flex items-center gap-3 cursor-pointer">
        <input type="checkbox" name="sort_live_by_views" id="sort-live-by-views" {% if sort_live_by_views %}checked{% endif %}
               class="w-5 h-5 rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
        <span>Move most-played content to the top of each category</span>
      </label>
      <p class="text-xs text-gray-400 mt-1 ml-8">Ordering is personalized from your playback history while category order stays unchanged.</p>
    </div>
  </div>

  <!-- Closed Captions settings -->
  <div id="captions" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Closed Captions</h3>
    <div class="mb-4">
      <label class="flex items-center gap-3 cursor-pointer">
        <input type="checkbox" name="captions_enabled" id="captions-enabled" {% if captions_enabled %}checked{% endif %}
               class="w-5 h-5 rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
        <span>Enable closed captions by default</span>
      </label>
    </div>

    <div class="mb-4">
      <label class="block text-sm mb-2">Preferred Caption Language</label>
      <select id="cc-lang-pref" class="px-3 py-1.5 bg-gray-700 rounded text-sm">
        <option value="">Any (first available)</option>
        <option value="en">English</option>
        <option value="es">Spanish</option>
        <option value="fr">French</option>
        <option value="de">German</option>
        <option value="it">Italian</option>
        <option value="pt">Portuguese</option>
        <option value="ja">Japanese</option>
        <option value="ko">Korean</option>
        <option value="zh">Chinese</option>
      </select>
    </div>

    <div class="grid grid-cols-2 gap-3 mb-4">
      <div>
        <label class="block text-sm mb-1">Font Size</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_size">
          <option value="0.7em">Very Small</option>
          <option value="0.85em">Small</option>
          <option value="1em">Medium</option>
          <option value="1.25em">Large</option>
          <option value="1.5em">Very Large</option>
        </select>
      </div>
      <div>
        <label class="block text-sm mb-1">Font</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_font">
          <option value="inherit">Default</option>
          <option value="monospace">Monospace</option>
          <option value="serif">Serif</option>
          <option value="sans-serif">Sans-Serif</option>
        </select>
      </div>
      <div>
        <label class="block text-sm mb-1">Text Color</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_color">
          <option value="#ffffff">White</option>
          <option value="#ffff00">Yellow</option>
          <option value="#00ff00">Green</option>
          <option value="#00ffff">Cyan</option>
          <option value="#ff00ff">Magenta</option>
          <option value="#ff0000">Red</option>
        </select>
      </div>
      <div>
        <label class="block text-sm mb-1">Text Shadow</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_shadow">
          <option value="0 0 4px black, 0 0 4px black">Drop Shadow</option>
          <option value="2px 2px 0 black">Raised</option>
          <option value="-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black">Outline</option>
          <option value="none">None</option>
        </select>
      </div>
      <div>
        <label class="block text-sm mb-1">Background Color</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_bg">
          <option value="#000000">Black</option>
          <option value="#333333">Dark Gray</option>
          <option value="transparent">Transparent</option>
        </select>
      </div>
      <div>
        <label class="block text-sm mb-1">Background Opacity</label>
        <select class="cc-setting w-full px-2 py-1 bg-gray-700 rounded text-sm" data-setting="cc_bg_opacity">
          <option value="1">100%</option>
          <option value="0.75">75%</option>
          <option value="0.5">50%</option>
          <option value="0.25">25%</option>
          <option value="0">0%</option>
        </select>
      </div>
    </div>

    <div class="p-4 rounded text-center" style="background-image: linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;">
      <span class="py-0.5 px-1 inline-block" id="cc-preview">Sample Caption Text</span>
    </div>
    <p class="text-xs text-gray-500 mt-2">
      Also: <code id="chrome-cc-link" class="bg-gray-700 px-1 rounded cursor-pointer hover:bg-gray-600" title="Click to copy">chrome://settings/captions</code>
    </p>
  </div>

  {% if is_admin %}
  <h3 class="text-lg text-gray-400 mb-3 mt-8">Server Settings</h3>

  <!-- Shared playlists -->
  <div id="playlists" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-2">Playlists</h3>
    <p class="text-sm text-gray-400 mb-3">Put your favorite content in playlists and organize them your way. Set them up here on the web and they show up everywhere.</p>
    <a href="/playlists" class="inline-block px-3 py-1 text-sm bg-blue-600 hover:bg-blue-700 rounded">Manage playlists</a>
  </div>
  {% endif %}

  <!-- Users management -->
  <div id="users" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">{% if is_admin %}Users{% else %}Account{% endif %}</h3>
    <div class="space-y-2">
      {% for u in all_users %}
      {% if is_admin or u.username == current_user %}
      <details class="bg-gray-700 rounded group" data-username="{{ u.username }}">
        <summary class="flex items-center justify-between p-2 cursor-pointer hover:bg-gray-600 rounded">
          <div class="flex items-center gap-2">
            <span class="font-medium">{{ u.username }}</span>
            {% if u.username == current_user %}<span class="text-xs text-gray-400">(you)</span>{% endif %}
            {% if u.admin %}<span class="text-xs px-1.5 py-0.5 bg-gray-600 rounded">admin</span>{% endif %}
          </div>
          <span class="text-gray-400 text-xs group-open:hidden">Expand</span>
        </summary>
        <div class="p-3 pt-1 border-t border-gray-600 space-y-3">
          {% if is_admin and all_users|length > 1 %}
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" class="admin-toggle w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500" {% if u.admin %}checked{% endif %}>
            <span class="text-sm">Admin privileges</span>
          </label>
          {% endif %}
          <div>
            <label class="block text-xs text-gray-400 mb-1">New Password</label>
            <div class="relative inline-block">
              <input type="password" class="password-input w-36 px-2 py-1 pr-8 text-sm bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
              <button type="button" onclick="togglePwdVis(this)" class="absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
                <svg class="w-4 h-4 eye-off" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                <svg class="w-4 h-4 eye-on hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
              </button>
            </div>
            <span class="text-xs text-gray-400 ml-2">Min 8 characters</span>
          </div>
          {% if is_admin %}
          <!-- Stream Limits (admin only) -->
          <div class="pt-2 border-t border-gray-600">
            <label class="block text-sm mb-2">Max Streams per Source: <span class="text-xs text-gray-400">(0 = unlimited, requires Always Transcode)</span></label>
            <div class="user-max-streams-container space-y-1 mb-3" data-username="{{ u.username }}">
              {% for src in sources %}
              {% if src.type != 'epg' %}
              <div class="flex items-center gap-2">
                <input type="number" class="user-source-max-streams w-16 px-2 py-0.5 text-xs bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
                       data-source-id="{{ src.id }}" value="{{ (u.max_streams_per_source or {}).get(src.id, 0) }}" min="0">
                <span class="text-xs text-gray-300">{{ src.name }}</span>
              </div>
              {% endif %}
              {% endfor %}
            </div>
            <!-- Group Restrictions -->
            <div class="mt-3">
              <label class="block text-sm mb-2">Group Access:</label>
              <div class="grid grid-cols-2 gap-2 mb-2">
                <div class="relative">
                  <input type="text" class="user-group-search w-full px-3 py-1 pr-7 bg-gray-600 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"
                         placeholder="Filter groups..." data-username="{{ u.username }}">
                  <button type="button" class="user-group-search-clear absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white text-sm px-1 hidden" data-username="{{ u.username }}">✕</button>
                </div>
                <div class="flex gap-2">
                  <button type="button" class="group-move-all-unavailable px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-username="{{ u.username }}">Block All</button>
                  <button type="button" class="group-move-all-available px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-username="{{ u.username }}">Allow All</button>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-2">
                <div>
                  <div class="text-xs text-gray-400 mb-1">Available</div>
                  <div class="user-available-groups h-96 overflow-auto p-2 bg-gray-700 rounded border-2 border-dashed border-gray-600 space-y-1"
                       data-username="{{ u.username }}">
                    {% for grp in all_groups %}
                    {% if grp.id not in (u.unavailable_groups or []) %}
                    <div class="group-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500" draggable="true" data-group-id="{{ grp.id }}" title="{{ grp.name }}">{{ grp.name }}</div>
                    {% endif %}
                    {% endfor %}
                  </div>
                </div>
                <div>
                  <div class="text-xs text-gray-400 mb-1">Unavailable</div>
                  <div class="user-unavailable-groups h-96 overflow-auto p-2 bg-gray-700 rounded border-2 border-dashed border-gray-600 space-y-1"
                       data-username="{{ u.username }}">
                    {% for grp in all_groups %}
                    {% if grp.id in (u.unavailable_groups or []) %}
                    <div class="group-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500" draggable="true" data-group-id="{{ grp.id }}" title="{{ grp.name }}">{{ grp.name }}</div>
                    {% endif %}
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
          <div class="flex justify-end">
            {% if u.username == current_user %}
            <button type="button" class="px-3 py-1.5 text-sm bg-red-600 hover:bg-red-700 rounded" onclick="showDeleteSelfModal()">Delete Account</button>
            {% elif is_admin %}
            <form action="/settings/users/delete/{{ u.username }}" method="POST">
              <button type="submit" class="px-3 py-1.5 text-sm bg-red-600 hover:bg-red-700 rounded" onclick="return confirm('Delete user {{ u.username }}?')">Delete</button>
            </form>
            {% endif %}
          </div>
        </div>
      </details>
      {% endif %}
      {% endfor %}
      {% if is_admin %}
      <details class="bg-gray-700 rounded group">
        <summary class="flex items-center justify-between p-2 cursor-pointer hover:bg-gray-600 rounded">
          <div class="flex items-center gap-2">
            <span class="font-medium">Add User</span>
          </div>
          <span class="text-gray-400 text-xs group-open:hidden">Expand</span>
        </summary>
      <div class="p-3 pt-1 border-t border-gray-600 space-y-3">
        <form id="add-user-form" class="space-y-3">
          <div class="flex gap-4 items-end flex-wrap">
            <div>
              <label class="block text-xs text-gray-400 mb-1">Username <span class="text-red-400">*</span></label>
              <input type="text" name="username" required class="w-36 px-2 py-1 text-sm bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-xs text-gray-400 mb-1">Password <span class="text-red-400">*</span></label>
              <div class="relative">
                <input type="password" name="password" required class="w-36 px-2 py-1 pr-8 text-sm bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                <button type="button" onclick="togglePwdVis(this)" class="absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
                  <svg class="w-4 h-4 eye-off" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                  <svg class="w-4 h-4 eye-on hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
              </div>
            </div>
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" name="admin" class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500">
              <span class="text-sm">Admin privileges</span>
            </label>
          </div>
          <!-- Max Streams per Source -->
          <div class="pt-2 border-t border-gray-600">
            <label class="block text-sm mb-2">Max Streams per Source: <span class="text-xs text-gray-400">(0 = unlimited)</span></label>
            <div id="add-user-max-streams" class="space-y-1 mb-3">
              {% for src in sources %}
              {% if src.type != 'epg' %}
              <div class="flex items-center gap-2">
                <input type="number" class="add-user-source-max-streams w-16 px-2 py-0.5 text-xs bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none"
                       data-source-id="{{ src.id }}" value="0" min="0">
                <span class="text-xs text-gray-300">{{ src.name }}</span>
              </div>
              {% endif %}
              {% endfor %}
            </div>
            <!-- Group Access -->
            <div class="mt-3">
              <label class="block text-sm mb-2">Group Access:</label>
              <div class="grid grid-cols-2 gap-2 mb-2">
                <div class="relative">
                  <input type="text" id="add-user-group-search" class="w-full px-3 py-1 pr-7 bg-gray-600 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"
                         placeholder="Filter groups...">
                  <button type="button" id="add-user-group-search-clear" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white text-sm px-1 hidden">✕</button>
                </div>
                <div class="flex gap-2">
                  <button type="button" id="add-user-block-all" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Block All</button>
                  <button type="button" id="add-user-allow-all" class="px-2 py-0.5 text-xs bg-gray-600 hover:bg-gray-500 rounded">Allow All</button>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-2">
                <div>
                  <div class="text-xs text-gray-400 mb-1">Available</div>
                  <div id="add-user-available-groups" class="h-96 overflow-auto p-2 bg-gray-700 rounded border-2 border-dashed border-gray-600 space-y-1">
                    {% for grp in all_groups %}
                    <div class="add-user-group-chip px-2 py-1 bg-gray-600 rounded text-xs cursor-move truncate hover:bg-gray-500" draggable="true" data-group-id="{{ grp.id }}" title="{{ grp.name }}">{{ grp.name }}</div>
                    {% endfor %}
                  </div>
                </div>
                <div>
                  <div class="text-xs text-gray-400 mb-1">Unavailable</div>
                  <div id="add-user-unavailable-groups" class="h-96 overflow-auto p-2 bg-gray-700 rounded border-2 border-dashed border-gray-600 space-y-1">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end items-center gap-3">
            <span id="add-user-msg" class="text-sm hidden"></span>
            <button type="submit" class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 rounded">Add User</button>
          </div>
        </form>
      </div>
      </details>
      {% endif %}
    </div>
  </div>

  {% if is_admin %}
  <!-- Transcoding settings -->
  <div id="transcoding" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Transcoding</h3>
    <div class="space-y-4" id="transcode-settings">
      <div>
        <label class="block text-sm font-medium mb-2">Mode</label>
        <div class="flex gap-4">
          <label class="flex items-center gap-2 cursor-pointer text-sm">
            <input type="radio" name="transcode_mode" value="auto" {% if transcode_mode == 'auto' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>Auto</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer text-sm">
            <input type="radio" name="transcode_mode" value="always" {% if transcode_mode == 'always' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>Always</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer text-sm">
            <input type="radio" name="transcode_mode" value="never" {% if transcode_mode == 'never' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>Never</span>
          </label>
        </div>
        <p class="text-xs text-gray-400 mt-1">Auto transcodes when browser can't play the format natively</p>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">Hardware Acceleration</label>
        <div class="flex flex-col gap-2">
          <!-- NVENC options -->
          <div class="flex gap-4">
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.nvenc or not available_encoders.vaapi %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="nvenc+vaapi" {% if transcode_hw == 'nvenc+vaapi' %}checked{% endif %}
                     {% if not available_encoders.nvenc or not available_encoders.vaapi %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>NVENC + VAAPI</span>
            </label>
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.nvenc %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="nvenc+software" {% if transcode_hw == 'nvenc+software' %}checked{% endif %}
                     {% if not available_encoders.nvenc %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>NVENC + Software</span>
            </label>
          </div>
          <!-- AMF options -->
          <div class="flex gap-4">
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.amf or not available_encoders.vaapi %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="amf+vaapi" {% if transcode_hw == 'amf+vaapi' %}checked{% endif %}
                     {% if not available_encoders.amf or not available_encoders.vaapi %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>AMF + VAAPI</span>
            </label>
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.amf %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="amf+software" {% if transcode_hw == 'amf+software' %}checked{% endif %}
                     {% if not available_encoders.amf %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>AMF + Software</span>
            </label>
          </div>
          <!-- Standalone options -->
          <div class="flex gap-4">
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.qsv %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="qsv" {% if transcode_hw == 'qsv' %}checked{% endif %}
                     {% if not available_encoders.qsv %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>QSV (Intel)</span>
            </label>
            <label class="flex items-center gap-2 text-sm {% if not available_encoders.vaapi %}opacity-40{% endif %}">
              <input type="radio" name="transcode_hw" value="vaapi" {% if transcode_hw == 'vaapi' %}checked{% endif %}
                     {% if not available_encoders.vaapi %}disabled{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>VAAPI</span>
            </label>
            <label class="flex items-center gap-2 text-sm">
              <input type="radio" name="transcode_hw" value="software" {% if transcode_hw == 'software' %}checked{% endif %}
                     class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
              <span>Software</span>
            </label>
          </div>
        </div>
        <p class="text-xs text-gray-400 mt-1">
        NVENC: discrete Nvidia GPU encoder;
        AMF: discrete AMD GPU encoder;
        VAAPI: CPU-integrated-GPU decoder (and/or encoder);
        Software: CPU decoder (and/or encoder)
        </p>
        <button type="button" id="refresh-encoders-btn"
                class="mt-2 px-3 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded">
          Re-detect Hardware
        </button>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">Max Transcode Resolution</label>
        <div class="flex gap-4 flex-wrap">
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="max_resolution" value="4k" {% if max_resolution == '4k' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>4K</span>
          </label>
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="max_resolution" value="1080p" {% if max_resolution in ('1080p', 'source') or not max_resolution %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>1080p</span>
          </label>
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="max_resolution" value="720p" {% if max_resolution == '720p' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>720p</span>
          </label>
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="max_resolution" value="480p" {% if max_resolution == '480p' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>480p</span>
          </label>
        </div>
        <p class="text-xs text-gray-400 mt-1">Limit output resolution (lower = faster, more compatible)</p>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">Max Quality</label>
        <div class="flex gap-4 flex-wrap">
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="quality" value="high" {% if quality == 'high' or not quality %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>High</span>
          </label>
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="quality" value="medium" {% if quality == 'medium' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>Medium</span>
          </label>
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="quality" value="low" {% if quality == 'low' %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>Low</span>
          </label>
        </div>
        <p class="text-xs text-gray-400 mt-1">Maximum quality ceiling (won't use more bits than source provides)</p>
      </div>
      <div id="sr-settings">
        <label class="block text-sm font-medium mb-2">AI Upscale</label>
        <div class="flex flex-wrap gap-4">
          <label class="flex items-center gap-2 text-sm">
            <input type="radio" name="sr_model" value="" {% if not sr_model %}checked{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>None</span>
          </label>
          <label class="flex items-center gap-2 text-sm {% if sr_model_name not in sr_models %}opacity-40{% endif %}">
            <input type="radio" name="sr_model" value="{{ sr_model_name }}" {% if sr_model == sr_model_name %}checked{% endif %}
                   {% if sr_model_name not in sr_models %}disabled{% endif %}
                   class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
            <span>NomosUni 2x (480p/720p/1080p)</span>
          </label>
        </div>
        <p class="text-xs text-gray-400 mt-1">{% if sr_available %}AI upscaling via TensorRT (requires NVIDIA GPU). Upscales to max resolution then scales down.{% else %}Not available - run <code class="bg-gray-700 px-1 rounded">tools/install-ai_upscale.sh</code> to install{% endif %}</p>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">VOD Transcode Cache (minutes)</label>
        <input type="number" name="vod_transcode_cache_mins" value="{{ vod_transcode_cache_mins }}"
               min="0" max="1440" step="5"
               class="setting-input w-32 px-3 py-2 bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
        <p class="text-xs text-gray-400 mt-1">Keep transcoded VOD for reuse (0 = disabled)</p>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">Live Session Timeout (seconds)</label>
        <input type="number" name="live_transcode_cache_secs" value="{{ live_transcode_cache_secs }}"
               min="0" max="300" step="5"
               class="setting-input w-32 px-3 py-2 bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
        <p class="text-xs text-gray-400 mt-1">Keep dead session for reconnect (0 = immediate cleanup)</p>
      </div>
      <div>
        <label class="block text-sm font-medium mb-2">Live DVR Buffer (minutes)</label>
        <input type="number" name="live_dvr_mins" value="{{ live_dvr_mins }}"
               min="0" step="5"
               class="setting-input w-32 px-3 py-2 bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
        <p class="text-xs text-gray-400 mt-1">Minutes of watched live history to retain for pause, rewind, and fast-forward (0 = disabled, ~30s buffer). Larger windows increase disk usage; live streams route through the server (remux when possible) while enabled.</p>
      </div>
    </div>
  </div>

  <!-- User-Agent -->
  <div id="user-agent" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">User-Agent</h3>
    <p class="text-sm text-gray-400 mb-4">HTTP User-Agent header sent when fetching streams, channel lists, VOD/series metadata, and EPG. Some providers reject requests with an unexpected User-Agent (HTTP 403). Stream passthrough uses the client's native user-agent.</p>
    <div class="space-y-4" id="user-agent-settings">
      <div class="space-y-2">
        <label class="flex items-center gap-3 cursor-pointer text-sm">
          <input type="radio" name="user_agent_preset" value="tivimate" {% if user_agent_preset == 'tivimate' %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
          <span>TiviMate</span>
          <span class="text-xs text-gray-500 font-mono">TiviMate/4.7.0</span>
        </label>
        <label class="flex items-center gap-3 cursor-pointer text-sm">
          <input type="radio" name="user_agent_preset" value="chrome" {% if user_agent_preset == 'chrome' %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
          <span>Chrome</span>
          <span class="text-xs text-gray-500 font-mono truncate max-w-xs">Mozilla/5.0 ... Chrome/...</span>
        </label>
        <label class="flex items-center gap-3 cursor-pointer text-sm">
          <input type="radio" name="user_agent_preset" value="default" {% if user_agent_preset == 'default' %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
          <span>FFmpeg</span>
          <span class="text-xs text-gray-500 font-mono">Lavf/...</span>
        </label>
        <label class="flex items-center gap-3 cursor-pointer text-sm">
          <input type="radio" name="user_agent_preset" value="vlc" {% if user_agent_preset == 'vlc' %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
          <span>VLC</span>
          <span class="text-xs text-gray-500 font-mono">VLC/3.0.20 LibVLC/3.0.20</span>
        </label>
        <label class="flex items-center gap-3 cursor-pointer text-sm">
          <input type="radio" name="user_agent_preset" value="custom" {% if user_agent_preset == 'custom' %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500">
          <span>Custom</span>
        </label>
      </div>
      <div id="custom-user-agent-container" class="{% if user_agent_preset != 'custom' %}hidden{% endif %}">
        <input type="text" name="user_agent_custom" value="{{ user_agent_custom }}"
               placeholder="Enter custom user-agent string"
               class="setting-input w-full p-2 bg-gray-700 border border-gray-600 rounded focus:border-blue-500 focus:outline-none font-mono text-sm">
      </div>
    </div>
  </div>

  <!-- Data Cache -->
  <div id="data-cache" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Data Cache</h3>
    <div class="mb-4">
      <label class="block text-sm font-medium mb-2">Transcode Directory</label>
      <input type="text" name="transcode_dir" value="{{ transcode_dir }}"
             placeholder="(system temp directory)"
             class="setting-input w-full p-2 bg-gray-700 border border-gray-600 rounded focus:border-blue-500 focus:outline-none font-mono text-sm">
      <p class="text-xs text-gray-400 mt-1">Directory for HLS segments. Empty = system temp. Use a fast SSD for best performance.</p>
    </div>
    <p class="text-sm text-gray-400 mb-4">Clear cached channel lists, movies, and series data. Use this after changing source settings or if content access isn't working correctly.</p>
    <div class="flex justify-end">
      <button id="clear-data-cache" class="px-3 py-1.5 text-sm bg-red-600 hover:bg-red-700 rounded">Delete</button>
    </div>
  </div>

  <!-- Probe Cache -->
  <div id="probe-cache" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Probe Cache</h3>
    <div class="mb-4">
      <label class="block text-sm font-medium mb-2">Probe Media (detect codecs/subs)</label>
      <div class="flex gap-4">
        <label class="flex items-center gap-2">
          <input type="checkbox" name="probe_live" {% if probe_live %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500 rounded">
          <span>Live TV</span>
        </label>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="probe_movies" {% if probe_movies %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500 rounded">
          <span>Movies</span>
        </label>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="probe_series" {% if probe_series %}checked{% endif %}
                 class="setting-input w-4 h-4 bg-gray-700 border-gray-600 text-blue-500 focus:ring-blue-500 rounded">
          <span>Series</span>
        </label>
      </div>
      <p class="text-xs text-gray-400 mt-1">Probing adds a few seconds delay on first play but enables hardware decode pipeline. Results are cached.</p>
    </div>
    <p class="text-sm text-gray-400 mb-4">Cached probe results avoid re-probing episodes in the same series.</p>
    <div id="probe-cache-list" class="space-y-2 max-h-96 overflow-y-auto">
      <div class="text-gray-500 text-sm">Loading...</div>
    </div>
    <div class="flex justify-end mt-4">
      <button id="clear-all-probe-cache" class="px-3 py-1.5 text-sm bg-red-600 hover:bg-red-700 rounded">Delete</button>
    </div>
  </div>

  <!-- Sources -->
  <div id="sources" class="mb-8 p-4 bg-gray-800 rounded">
    <h3 class="text-xl font-semibold mb-4">Sources</h3>
    <div class="space-y-2">
      {% for source in sources %}
      <details class="bg-gray-700 rounded group">
        <summary class="flex items-center justify-between p-2 cursor-pointer hover:bg-gray-600 rounded">
          <div>
            <span class="font-medium">{{ source.name }}</span>
            <span class="ml-2 px-2 py-0.5 text-xs bg-gray-600 rounded">{{ source.type }}</span>
            <div class="text-sm text-gray-400 truncate max-w-md">{{ source.url }}</div>
          </div>
          <span class="text-gray-400 text-xs group-open:hidden">Expand</span>
        </summary>
        <form class="source-edit-form p-3 pt-0 space-y-3 border-t border-gray-600" data-source-id="{{ source.id }}">
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-sm font-medium mb-1">Name</label>
              <input type="text" name="name" value="{{ source.name }}" required
                     class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">Type</label>
              <select name="source_type" onchange="toggleSourceFields(this)"
                      class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                <option value="xtream" {% if source.type == 'xtream' %}selected{% endif %}>Xtream API</option>
                <option value="m3u" {% if source.type == 'm3u' %}selected{% endif %}>M3U Playlist</option>
                <option value="epg" {% if source.type == 'epg' %}selected{% endif %}>EPG Only</option>
              </select>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">URL</label>
            <input type="url" name="url" value="{{ source.url }}" required
                   class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
          </div>
          <div class="non-epg-only" style="{% if source.type == 'epg' %}display:none{% endif %}">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" name="epg_enabled" {% if source.epg_enabled is not defined or source.epg_enabled %}checked{% endif %}
                     class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
              <span class="text-sm">Fetch EPG from this source</span>
            </label>
          </div>
          <div class="grid grid-cols-2 gap-3 xtream-fields" style="{% if source.type != 'xtream' %}display:none{% endif %}">
            <div>
              <label class="block text-sm font-medium mb-1">Username</label>
              <input type="text" name="username" value="{{ source.username }}"
                     class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">Password</label>
              <div class="relative">
                <input type="password" name="password" value="{{ source.password }}"
                       class="w-full px-3 py-1.5 pr-9 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
                <button type="button" onclick="togglePwdVis(this)" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
                  <svg class="w-5 h-5 eye-off" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                  <svg class="w-5 h-5 eye-on hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
              </div>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">EPG Timeout (seconds)</label>
            <input type="number" name="epg_timeout" value="{{ source.epg_timeout|default(120) }}" min="1" max="3600"
                   class="w-32 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <span class="text-xs text-gray-400 ml-2">1-3600s (default: 120)</span>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">EPG Schedule</label>
            <input type="text" name="epg_schedule" value="{{ source.epg_schedule|default([])|join(', ') }}"
                   placeholder="03:00, 15:00"
                   class="w-48 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <span class="text-xs text-gray-400 ml-2">Times to auto-refresh (comma-separated HH:MM)</span>
          </div>
          <div class="epg-url-field" style="{% if source.type == 'epg' %}display:none{% endif %}">
            <label class="block text-sm font-medium mb-1">EPG URL</label>
            <input type="text" name="epg_url" value="{{ source.epg_url|default('') }}"
                   placeholder="http://example.com/epg.xml"
                   class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm">
            <span class="text-xs text-gray-400">Auto-detected on first refresh, or set manually</span>
          </div>
          <div class="non-epg-only" style="{% if source.type == 'epg' %}display:none{% endif %}">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" name="deinterlace_fallback" {% if source.deinterlace_fallback is not defined or source.deinterlace_fallback %}checked{% endif %}
                     class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
              <span class="text-sm">Deinterlace when probe skipped</span>
            </label>
            <span class="text-xs text-gray-400 ml-6">Enable for OTA/HDHomeRun, disable for IPTV</span>
          </div>
          <div class="non-epg-only" style="{% if source.type == 'epg' %}display:none{% endif %}">
            <label class="block text-sm font-medium mb-1">Max Streams</label>
            <input type="number" name="max_streams" value="{{ source.max_streams | default(0) }}" min="0"
                   class="w-24 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <span class="text-xs text-gray-400 ml-2">0 = unlimited</span>
          </div>
          <div class="source-access">
            <label class="block text-sm font-medium mb-1">Available To</label>
            <select name="access" onchange="this.closest('.source-access').querySelector('.source-users').classList.toggle('hidden', this.value !== 'selected')"
                    class="px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
              <option value="all" {% if source.users is not defined or source.users is none %}selected{% endif %}>All users</option>
              <option value="selected" {% if source.users is defined and source.users is not none %}selected{% endif %}>Selected users only</option>
            </select>
            <div class="source-users mt-2 flex flex-wrap gap-x-4 gap-y-1 {% if source.users is not defined or source.users is none %}hidden{% endif %}">
              {% for u in all_users if not u.admin %}
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="users" value="{{ u.username }}" {% if source.users is defined and source.users is not none and u.username in source.users %}checked{% endif %}
                       class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
                <span class="text-sm">{{ u.username }}</span>
              </label>
              {% else %}
              <span class="text-xs text-gray-400">No non-admin users yet.</span>
              {% endfor %}
              <p class="w-full text-xs text-gray-400">Admins always have access. Unselected users won't see or play anything from this source.</p>
            </div>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">Refresh</label>
            <div class="flex gap-2" data-source-id="{{ source.id }}" data-source-type="{{ source.type }}">
              {% if source.type == 'xtream' %}
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="epg"><span class="spinner"></span><span class="label">EPG</span></button>
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="live"><span class="spinner"></span><span class="label">Live</span></button>
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="vod"><span class="spinner"></span><span class="label">VOD</span></button>
              {% elif source.type == 'm3u' %}
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="epg"><span class="spinner"></span><span class="label">EPG</span></button>
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="m3u"><span class="spinner"></span><span class="label">M3U</span></button>
              {% elif source.type == 'epg' %}
              <button type="button" class="refresh-btn px-2 py-1 text-xs bg-gray-600 hover:bg-gray-500 rounded" data-refresh="epg"><span class="spinner"></span><span class="label">EPG</span></button>
              {% endif %}
            </div>
          </div>
          <div class="flex justify-end">
            <button type="button" class="delete-source-btn px-3 py-1.5 bg-red-600 hover:bg-red-700 rounded text-sm"
                    data-source-id="{{ source.id }}">Delete</button>
          </div>
        </form>
      </details>
      {% endfor %}
      <details class="bg-gray-700 rounded group">
        <summary class="flex items-center justify-between p-2 cursor-pointer hover:bg-gray-600 rounded">
          <div>
            <span class="font-medium">Add Source</span>
          </div>
          <span class="text-gray-400 text-xs group-open:hidden">Expand</span>
        </summary>
      <div class="p-3 pt-1 border-t border-gray-600">
    <form action="/settings/add" method="POST" class="space-y-3" id="add-source-form">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium mb-1">Name <span class="text-red-400">*</span></label>
          <input type="text" name="name" required placeholder="My IPTV"
                 class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">Type</label>
          <select name="source_type" id="source-type"
                  class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <option value="xtream">Xtream API</option>
            <option value="m3u">M3U Playlist</option>
            <option value="epg">EPG Only</option>
          </select>
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">URL <span class="text-red-400">*</span></label>
        <input type="url" name="url" required placeholder="https://server.com"
               class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
      </div>
      <div id="epg-enabled-field">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" name="epg_enabled" checked
                 class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
          <span class="text-sm">Fetch EPG from this source</span>
        </label>
      </div>
      <div id="deinterlace-field">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" name="deinterlace_fallback"
                 class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
          <span class="text-sm">Deinterlace when probe skipped</span>
        </label>
        <span class="text-xs text-gray-400 ml-6">Enable for OTA/HDHomeRun, disable for IPTV</span>
      </div>
      <div id="max-streams-field">
        <label class="block text-sm font-medium mb-1">Max Streams</label>
        <input type="number" name="max_streams" value="0" min="0"
               class="w-24 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
        <span class="text-xs text-gray-400 ml-2">0 = unlimited</span>
      </div>
      <div class="source-access">
        <label class="block text-sm font-medium mb-1">Available To</label>
        <select name="access" onchange="this.closest('.source-access').querySelector('.source-users').classList.toggle('hidden', this.value !== 'selected')"
                class="px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
          <option value="all" selected>All users</option>
          <option value="selected">Selected users only</option>
        </select>
        <div class="source-users mt-2 flex flex-wrap gap-x-4 gap-y-1 hidden">
          {% for u in all_users if not u.admin %}
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="users" value="{{ u.username }}"
                   class="w-4 h-4 rounded bg-gray-600 border-gray-500 text-blue-500 focus:ring-blue-500">
            <span class="text-sm">{{ u.username }}</span>
          </label>
          {% else %}
          <span class="text-xs text-gray-400">No non-admin users yet.</span>
          {% endfor %}
          <p class="w-full text-xs text-gray-400">Admins always have access. Unselected users won't see or play anything from this source.</p>
        </div>
      </div>
      <div id="xtream-fields" class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium mb-1">Username</label>
          <input type="text" name="username" placeholder="username"
                 class="w-full px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">Password</label>
          <div class="relative">
            <input type="password" name="password" placeholder="password"
                   class="w-full px-3 py-1.5 pr-9 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
            <button type="button" onclick="togglePwdVis(this)" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white">
              <svg class="w-5 h-5 eye-off" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
              <svg class="w-5 h-5 eye-on hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium mb-1">EPG Timeout (seconds)</label>
          <input type="number" name="epg_timeout" value="120" min="1" max="3600"
                 class="w-32 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
          <span class="text-xs text-gray-400 ml-2">1-3600s</span>
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">EPG Schedule</label>
          <input type="text" name="epg_schedule" placeholder="03:00, 15:00"
                 class="w-48 px-3 py-1.5 bg-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
          <span class="text-xs text-gray-400 ml-2">HH:MM times</span>
        </div>
      </div>
      <div class="flex justify-end">
        <button type="submit" class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 rounded">Add Source</button>
      </div>
    </form>
      </div>
      </details>
    </div>
  </div>
  {% endif %}
</div>

<!-- Delete Self Modal -->
<div id="delete-self-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50">
  <div class="bg-gray-800 rounded-lg p-6 max-w-sm w-full mx-4">
    <h3 class="text-lg font-semibold mb-4">Delete Your Account</h3>
    <p class="text-sm text-gray-400 mb-4">Enter your password to confirm account deletion. This cannot be undone.</p>
    <form id="delete-self-form" onsubmit="submitDeleteSelf(event); return false;">
      <input type="password" id="delete-self-password" placeholder="Password" required
             class="w-full px-3 py-2 bg-gray-700 rounded mb-2 focus:outline-none focus:ring-1 focus:ring-red-500">
      <div id="delete-self-msg" class="text-red-400 text-sm mb-2"></div>
      <div class="flex gap-3 justify-end">
        <button type="button" onclick="hideDeleteSelfModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded">Cancel</button>
        <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded">Delete</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
window.SETTINGS_CONFIG = {
  currentUser: {{ current_user | tojson | safe }},
  selectedCats: {{ selected_cats | tojson | safe }},
  selectedVodCats: {{ selected_vod_cats | tojson | safe }},
  selectedSeriesCats: {{ selected_series_cats | tojson | safe }},
  catNames: {
    {% for cat in live_categories %}{{ cat.category_id | tojson | safe }}: {{ cat.category_name | tojson | safe }}{% if not loop.last %},{% endif %}
    {% endfor %}
  },
  vodCatNames: {
    {% for cat in vod_categories %}{{ cat.category_id | tojson | safe }}: {{ cat.category_name | tojson | safe }}{% if not loop.last %},{% endif %}
    {% endfor %}
  },
  seriesCatNames: {
    {% for cat in series_categories %}{{ cat.category_id | tojson | safe }}: {{ cat.category_name | tojson | safe }}{% if not loop.last %},{% endif %}
    {% endfor %}
  },
  ccStyle: {{ cc_style | tojson | safe }},
  ccLang: {{ cc_lang | tojson | safe }}
};
</script>
<script src="/static/js/settings.js"></script>
{% endblock %}