{% extends "base.html" %}

{% block additional_styles %}
.pattern-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}
.pattern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.pattern-card.selected {
  border: 2px solid #0c7ff2;
}

/* Pattern grid - responsive columns */
#patternGrid {
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}
@media (min-width: 480px) {
  #patternGrid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 128px));
  }
}

@media (min-width: 1024px) {
  .preview-open .layout-content-container {
    margin-right: 28rem;
  }
  #patternPreviewPanel {
    transform: translateX(0);
  }
}
.delete-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #9ca3af !important;
}

/* Pattern preview styles */
.pattern-preview {
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
}
.pattern-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Pattern preview panel styles */
#patternPreviewPanel .bg-slate-200 {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
#patternPreviewPanel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dark mode styles for index page */
.dark .pattern-card {
  background-color: #262626;
  border-color: #404040;
}
.dark .pattern-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.dark .pattern-card.selected {
  border-color: #0c7ff2;
}
.dark .delete-button-disabled {
  background-color: #262626 !important;
  border-color: #404040 !important;
  color: #6b7280 !important;
}
.dark #patternPreviewPanel {
  background-color: #262626;
}
.dark #patternPreviewPanel header {
  border-color: #404040;
}
.dark #patternPreviewPanel h2 {
  color: #e5e5e5;
}
.dark #patternPreviewPanel .text-slate-500 {
  color: #9ca3af;
}
.dark #patternPreviewPanel .text-slate-700 {
  color: #d1d5db;
}
.dark #patternPreviewPanel .border-slate-300 {
  border-color: #404040;
}
.dark #patternPreviewPanel .bg-slate-200 {
  background-color: #262626;
  border-color: #404040;
}
.dark #patternPreviewPanel .hover\:bg-slate-100:hover {
  background-color: #404040;
}
.dark #patternPreviewPanel .hover\:text-slate-700:hover {
  color: #e5e5e5;
}
.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 .bg-gray-50 {
  background-color: #1a1a1a;
}
.dark .bg-white {
  background-color: #262626;
}
.dark .text-gray-900 {
  color: #e5e5e5;
}
.dark .text-gray-500 {
  color: #9ca3af;
}
.dark .text-gray-400 {
  color: #9ca3af;
}
.dark .border-gray-300 {
  border-color: #404040;
}
.dark .hover\:bg-red-50:hover {
  background-color: #2d1a1a;
}
.dark .focus\:ring-offset-2 {
  --tw-ring-offset-color: #262626;
}
.dark .text-\[\#111518\] {
  color: #e5e5e5;
}
.dark .border-b-\[\#f0f2f5\] {
  border-color: #404040;
}
.dark .hover\:bg-slate-100:hover {
  background-color: #404040;
}
.dark .hover\:text-slate-700:hover {
  color: #e5e5e5;
}
.dark .has-\[\:checked\]\:bg-\[\#0b80ee\]:has(:checked) {
  background-color: #0c7ff2;
}
.dark .has-\[\:checked\]\:border-\[\#0b80ee\]:has(:checked) {
  border-color: #0c7ff2;
}
.dark .has-\[\:checked\]\:ring-\[\#0b80ee\]:has(:checked) {
  --tw-ring-color: #0c7ff2;
}
.dark .has-\[\:checked\]\:ring-offset-2:has(:checked) {
  --tw-ring-offset-color: #262626;
}

/* Dark mode pattern preview styles */
.dark .pattern-preview {
  border-color: #404040;
}
.dark .pattern-preview img {
  filter: invert(1);
}
.dark #patternPreviewPanel img {
  filter: invert(1);
}
.dark .pattern-card img {
  filter: invert(1);
  background-color:rgb(229, 229, 229);
}

{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-5xl mb-24">
    <div id="browseHeader" class="flex-none bg-gray-50 py-4">
        <div class="mt-2 sm:mt-8 lg:mt-2">
            <!-- Header Row -->
            <div class="flex items-center justify-between gap-2 mb-4">
                <h2 class="text-gray-900 text-3xl font-bold leading-tight tracking-tight">
                    Browse Patterns
                </h2>
                <button
                        id="cacheAllButton"
                        class="inline-flex gap-1 sm:gap-2 transition-colors items-center justify-center rounded-lg px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-gray-900 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shrink-0"
                >
                    <span class="material-icons text-sm pr-1 sm:pr-2">cached</span>
                    <span class="hidden sm:inline">Cache All Previews</span>
                    <span class="sm:hidden">Cache</span>
                </button>
            </div>
            
            <!-- Controls Row -->
            <div class="flex gap-1 sm:gap-2 items-center text-xs sm:text-sm min-w-0 overflow-x-auto mb-4">
                <div class="flex items-center gap-1">
                    <span class="text-xs font-medium text-gray-700 hidden sm:inline">Sort:</span>
                    <select id="browseSortFieldSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1 min-w-0 flex-shrink" disabled>
                        <option value="name">Name</option>
                        <option value="date">Date Modified</option>
                        <option value="coordinates">Coordinates</option>
                        <option value="favorite">Favorite</option>
                    </select>
                    <button id="browseSortDirectionBtn" class="p-1 rounded hover:bg-gray-200 text-gray-500 opacity-50 cursor-not-allowed" title="Loading..." disabled>
                        <span class="material-icons text-sm" id="browseSortDirectionIcon">arrow_upward</span>
                    </button>
                </div>
                
                <div class="flex items-center gap-1 min-w-0">
                    <span class="text-xs font-medium text-gray-700 hidden sm:inline">Folder:</span>
                    <select id="browseCategoryFilterSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1 min-w-0 flex-shrink" disabled>
                        <option value="all">All Folders (loading...)</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="relative w-full sm:w-auto flex grow gap-2 items-center flex-wrap">
            <div class="flex gap-2 flex-1">
                <div class="relative flex-1">
                    <input
                            id="patternSearch"
                            class="form-input block w-full h-11 rounded-lg border-gray-300 bg-gray-50 py-2.5 p-4 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm"
                            placeholder="Search patterns..."
                            type="search"
                    />
                    <button
                            id="searchButton"
                            class="inline-flex absolute top-0 right-0 h-11 w-11 items-center justify-center rounded-lg bg-blue-600 p-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                    >
                        <span class="material-icons text-sm font-semibold text-white">search</span>
                    </button>
                </div>
            </div>
            <!-- Add Pattern Button -->
            <input
                    type="file"
                    id="patternFileInput"
                    accept=".thr"
                    multiple
                    class="hidden"
            />
            <button
                    aria-label="Add new pattern"
                    class="inline-flex items-center justify-center rounded-lg h-11 w-11 bg-blue-600 text-white shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ml-2 text-xl font-bold"
                    onclick="document.getElementById('patternFileInput').click()"
            >
                <span class="material-icons">add</span>
            </button>
        </div>
    </div>
    <section class="px-4 py-6">
        <div id="patternGrid" class="grid gap-2 sm:gap-4 md:gap-6">
            <!-- All patterns will be populated here -->
        </div>
        <!-- Spacer to allow scrolling past last patterns -->
        <div style="height: 200px; background: transparent;"></div>
    </section>
</div>

<!-- Pattern Preview Panel -->
<div id="patternPreviewPanel"
     class="fixed top-0 bottom-0 right-0 w-full max-w-md transform translate-x-full transition-transform duration-300 ease-in-out z-40 lg:translate-x-0 lg:opacity-0 lg:pointer-events-none">
    <div class="h-full bg-white shadow-xl">
        <header class="flex items-center justify-between border-b border-solid border-b-[#f0f2f5] px-6 py-3 sm:py-4">
            <div class="flex items-center gap-3 text-[#111518]">
                <h2 id="patternPreviewTitle" class="text-[#111518] text-lg font-semibold leading-tight">Pattern
                    Details</h2>
            </div>
            <button id="closePreviewPanel"
                    class="flex cursor-pointer items-center justify-center rounded-full p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#0b80ee]">
                <span class="material-icons text-2xl">close</span>
            </button>
        </header>
        <div class="p-6 overflow-y-auto h-[calc(100%-4rem)]">
            <div class="mb-6 aspect-square w-full overflow-hidden pattern-preview rounded-full relative group">
                <img id="patternPreviewImage" alt="Pattern Preview" class="h-full w-full object-cover" src=""/>
                <!-- Play button overlay for animated preview -->
                <div id="previewPlayOverlay"
                     class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer">
                    <div class="bg-white rounded-full p-3 shadow-lg flex items-center justify-center w-12 h-12">
                        <span class="material-icons text-2xl text-gray-800">play_arrow</span>
                    </div>
                </div>
            </div>
            <div class="mb-4 flex justify-between text-sm">
                <div class="flex items-center gap-2">
                    <span class="text-slate-500">First:</span>
                    <span id="firstCoordinate" class="font-semibold text-[#111518]">(0, 0)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-slate-500">Last:</span>
                    <span id="lastCoordinate" class="font-semibold text-[#111518]">(0, 0)</span>
                </div>
            </div>
            <div class="mb-4">
                <h3 class="mb-2 text-sm font-semibold text-slate-700">Pre-Execution Action</h3>
                <div class="grid grid-cols-2 gap-2">
                    <label class="group relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-300 p-2 text-center text-sm font-medium text-slate-700 transition-all hover:border-[#0b80ee] has-[:checked]:border-[#0b80ee] has-[:checked]:bg-[#0b80ee] has-[:checked]:text-white has-[:checked]:ring-2 has-[:checked]:ring-[#0b80ee] has-[:checked]:ring-offset-2">
                        Adaptive
                        <input checked="" class="peer sr-only" name="preExecutionAction" type="radio" value="adaptive"/>
                    </label>
                    <label class="group relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-300 p-2 text-center text-sm font-medium text-slate-700 transition-all hover:border-[#0b80ee] has-[:checked]:border-[#0b80ee] has-[:checked]:bg-[#0b80ee] has-[:checked]:text-white has-[:checked]:ring-2 has-[:checked]:ring-[#0b80ee] has-[:checked]:ring-offset-2">
                        Clear From Center
                        <input class="peer sr-only" name="preExecutionAction" type="radio" value="clear_from_in"/>
                    </label>
                    <label class="group relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-300 p-2 text-center text-sm font-medium text-slate-700 transition-all hover:border-[#0b80ee] has-[:checked]:border-[#0b80ee] has-[:checked]:bg-[#0b80ee] has-[:checked]:text-white has-[:checked]:ring-2 has-[:checked]:ring-[#0b80ee] has-[:checked]:ring-offset-2">
                        Clear From Perimeter
                        <input class="peer sr-only" name="preExecutionAction" type="radio" value="clear_from_out"/>
                    </label>
                    <label class="group relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-300 p-2 text-center text-sm font-medium text-slate-700 transition-all hover:border-[#0b80ee] has-[:checked]:border-[#0b80ee] has-[:checked]:bg-[#0b80ee] has-[:checked]:text-white has-[:checked]:ring-2 has-[:checked]:ring-[#0b80ee] has-[:checked]:ring-offset-2">
                        Clear Sideway
                        <input class="peer sr-only" name="preExecutionAction" type="radio" value="clear_sideway"/>
                    </label>
                    <label class="group relative flex cursor-pointer items-center justify-center rounded-lg border border-slate-300 p-2 text-center text-sm font-medium text-slate-700 transition-all hover:border-[#0b80ee] has-[:checked]:border-[#0b80ee] has-[:checked]:bg-[#0b80ee] has-[:checked]:text-white has-[:checked]:ring-2 has-[:checked]:ring-[#0b80ee] has-[:checked]:ring-offset-2">
                        None
                        <input class="peer sr-only" name="preExecutionAction" type="radio" value="none"/>
                    </label>
                </div>
            </div>
            <div class="space-y-3">
                <button id="playPattern"
                        class="flex w-full items-center justify-center gap-2 rounded-lg bg-[#0b80ee] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-[#0b80ee] focus:ring-offset-2">
                    <span class="material-icons text-lg">play_arrow</span>
                    Play
                </button>
                <button id="deletePattern"
                        class="flex w-full items-center justify-center gap-2 rounded-lg border border-red-500 px-4 py-2.5 text-sm font-semibold text-red-500 shadow-sm transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                    <span class="material-icons text-lg">delete</span>
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Animated Preview Modal -->
<div id="animatedPreviewModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] flex flex-col overflow-hidden">
            <!-- Modal Header -->
            <div class="flex items-center justify-between p-6 border-b border-gray-200 shrink-0">
                <h3 id="animatedPreviewTitle" class="text-xl font-semibold text-gray-900">Animated Preview</h3>
                <button id="closeAnimatedPreview" class="text-gray-400 hover:text-gray-600">
                    <span class="material-icons text-2xl">close</span>
                </button>
            </div>

            <!-- Modal Content -->
            <div class="p-6 overflow-y-auto grow h-full">
                <!-- Canvas Container -->
                <div class="relative flex justify-center h-full">
                    <canvas id="animatedPreviewCanvas"
                            class="border border-gray-300 rounded-full dark:invert"></canvas>
                    <!-- Play/Pause Overlay -->
                    <div id="playPauseOverlay"
                         class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 opacity-0 transition-opacity duration-200 cursor-pointer rounded-full">
                        <div class="bg-white rounded-full p-4 shadow-lg">
                            <span id="playPauseIcon" class="material-icons text-3xl text-gray-800">play_arrow</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <div class="p-6 space-y-4 shrink-0">
                <!-- Speed Control -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Speed</label>
                    <div class="flex items-center gap-4">
                        <input type="range" id="speedSlider" min="0.1" max="5" step="0.1" value="1" class="flex-1">
                        <span id="speedValue" class="text-sm font-medium text-gray-900 w-16">1x</span>
                    </div>
                </div>

                <!-- Progress Control -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Progress</label>
                    <div class="flex items-center gap-4">
                        <input type="range" id="progressSlider" min="0" max="100" step="0.1" value="0"
                               class="flex-1">
                        <span id="progressValue" class="text-sm font-medium text-gray-900 w-20">0%</span>
                    </div>
                </div>

                <!-- Control Buttons -->
                <div class="flex items-center justify-center gap-4">
                    <button id="playPauseBtn"
                            class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        <span id="playPauseBtnIcon" class="material-icons">play_arrow</span>
                        <span id="playPauseBtnText">Play</span>
                    </button>
                    <button id="resetBtn"
                            class="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                        <span class="material-icons">replay</span>
                        Reset
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/index.js"></script>
<script>
// File upload is handled in index.js

// Update delete button state when pattern is selected
function updateDeleteButtonState(patternName) {
  const deleteButton = document.getElementById('deletePattern');
  if (!deleteButton) return;

  if (patternName && patternName.startsWith('custom_patterns/')) {
    deleteButton.classList.remove('delete-button-disabled');
    deleteButton.disabled = false;
  } else {
    deleteButton.classList.add('delete-button-disabled');
    deleteButton.disabled = true;
  }
}

// Override the selectPattern function to update delete button state
const originalSelectPattern = window.selectPattern;
window.selectPattern = function(pattern, card) {
  originalSelectPattern(pattern, card);
  updateDeleteButtonState(pattern);
};

// Initialize delete button state when the page loads
document.addEventListener('DOMContentLoaded', function() {
  // Initially disable the delete button
  const deleteButton = document.getElementById('deletePattern');
  if (deleteButton) {
    deleteButton.classList.add('delete-button-disabled');
    deleteButton.disabled = true;
  }
});

// Override the loadPatterns function to update delete button state after loading
const originalLoadPatterns = window.loadPatterns;
window.loadPatterns = async function() {
  await originalLoadPatterns();
  // Update delete button state based on currently selected pattern
  const selectedPattern = document.querySelector('.pattern-card.selected');
  if (selectedPattern) {
    updateDeleteButtonState(selectedPattern.dataset.pattern);
  } else {
    updateDeleteButtonState(null);
  }
};

// Sticky search bar on desktop
(function() {
  // Only apply on large screens (lg: 1024px+)
  const mediaQuery = window.matchMedia('(min-width: 1024px)');
  if (!mediaQuery.matches) return;

  // Create a compact fixed search bar
  const siteHeaderHeight = 56;
  let fixedBar = null;
  let isFixed = false;
  const triggerPoint = 150; // Scroll distance to trigger

  function createFixedBar() {
    if (fixedBar) return;

    fixedBar = document.createElement('div');
    fixedBar.id = 'fixedSearchBar';
    // Get actual header height
    const siteHeader = document.querySelector('header');
    const headerHeight = siteHeader ? siteHeader.offsetHeight : 64;

    fixedBar.style.cssText = `
      position: fixed;
      top: ${headerHeight}px;
      left: 0;
      right: 0;
      background: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
      z-index: 30;
      transform: translateY(-100%);
      transition: transform 0.2s ease;
    `;
    if (document.documentElement.classList.contains('dark')) {
      fixedBar.style.background = '#1a1a1a';
      fixedBar.style.borderColor = '#404040';
    }

    fixedBar.innerHTML = `
      <div class="max-w-5xl mx-auto px-4 py-2 flex items-center gap-3">
        <div class="flex items-center gap-1 shrink-0">
          <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Sort:</span>
          <select id="fixedSortSelect" class="text-xs rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 bg-white text-gray-900 px-2 py-1">
            <option value="name">Name</option>
            <option value="date">Date Modified</option>
            <option value="coordinates">Coordinates</option>
            <option value="favorite">Favorite</option>
          </select>
          <button id="fixedSortDirBtn" class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
            <span class="material-icons text-sm" id="fixedSortDirIcon">arrow_upward</span>
          </button>
        </div>
        <div class="relative flex-1">
          <input id="fixedSearchInput" class="form-input block w-full h-11 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 bg-gray-50 py-2.5 p-4 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm" placeholder="Search patterns..." type="search" />
          <button id="fixedSearchBtn" class="inline-flex absolute top-0 right-0 h-11 w-11 items-center justify-center rounded-lg bg-blue-600 p-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            <span class="material-icons text-sm font-semibold text-white">search</span>
          </button>
        </div>
        <button id="fixedAddBtn" class="inline-flex items-center justify-center rounded-lg h-11 w-11 bg-blue-600 text-white shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
          <span class="material-icons">add</span>
        </button>
      </div>
    `;

    document.body.appendChild(fixedBar);

    // Sync with main controls
    const mainSearch = document.getElementById('patternSearch');
    const fixedSearch = fixedBar.querySelector('#fixedSearchInput');
    const fixedSearchBtn = fixedBar.querySelector('#fixedSearchBtn');
    const fixedAdd = fixedBar.querySelector('#fixedAddBtn');

    // Search on Enter key
    fixedSearch.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        if (mainSearch) mainSearch.value = fixedSearch.value;
        if (typeof searchPatterns === 'function') {
          searchPatterns(fixedSearch.value.trim());
        }
      }
    });

    // Also sync on input for live typing
    fixedSearch.addEventListener('input', () => {
      if (mainSearch) mainSearch.value = fixedSearch.value;
    });

    // Search button click
    fixedSearchBtn.addEventListener('click', () => {
      if (mainSearch) mainSearch.value = fixedSearch.value;
      if (typeof searchPatterns === 'function') {
        searchPatterns(fixedSearch.value.trim());
      }
    });

    fixedAdd.addEventListener('click', () => {
      document.getElementById('patternFileInput')?.click();
    });

    // Sort controls sync
    const mainSortSelect = document.getElementById('browseSortFieldSelect');
    const mainSortDirBtn = document.getElementById('browseSortDirectionBtn');
    const mainSortDirIcon = document.getElementById('browseSortDirectionIcon');
    const fixedSortSelect = fixedBar.querySelector('#fixedSortSelect');
    const fixedSortDirBtn = fixedBar.querySelector('#fixedSortDirBtn');
    const fixedSortDirIcon = fixedBar.querySelector('#fixedSortDirIcon');

    // Sync initial values from main controls
    if (mainSortSelect) {
      fixedSortSelect.value = mainSortSelect.value;
    }
    if (mainSortDirIcon) {
      fixedSortDirIcon.textContent = mainSortDirIcon.textContent;
    }

    // Fixed sort select change -> sync to main and trigger sort
    fixedSortSelect.addEventListener('change', () => {
      if (mainSortSelect) {
        mainSortSelect.value = fixedSortSelect.value;
        mainSortSelect.dispatchEvent(new Event('change'));
      }
    });

    // Fixed sort direction button click -> sync to main and trigger sort
    fixedSortDirBtn.addEventListener('click', () => {
      if (mainSortDirBtn) {
        mainSortDirBtn.click();
        // After click, sync the icon
        setTimeout(() => {
          if (mainSortDirIcon) {
            fixedSortDirIcon.textContent = mainSortDirIcon.textContent;
          }
        }, 50);
      }
    });

    // Listen for changes on main controls to sync back to fixed
    if (mainSortSelect) {
      mainSortSelect.addEventListener('change', () => {
        fixedSortSelect.value = mainSortSelect.value;
      });
    }

    // Create observer to sync sort direction icon changes
    if (mainSortDirIcon) {
      const observer = new MutationObserver(() => {
        fixedSortDirIcon.textContent = mainSortDirIcon.textContent;
      });
      observer.observe(mainSortDirIcon, { childList: true, characterData: true, subtree: true });
    }
  }

  function handleScroll() {
    if (!mediaQuery.matches) return;

    if (window.scrollY > triggerPoint && !isFixed) {
      createFixedBar();
      requestAnimationFrame(() => {
        fixedBar.style.transform = 'translateY(0)';
      });
      isFixed = true;
    } else if (window.scrollY <= triggerPoint && isFixed) {
      if (fixedBar) {
        fixedBar.style.transform = 'translateY(-100%)';
      }
      isFixed = false;
    }
  }

  window.addEventListener('scroll', handleScroll, { passive: true });
  mediaQuery.addEventListener('change', (e) => {
    if (!e.matches && fixedBar) {
      fixedBar.remove();
      fixedBar = null;
      isFixed = false;
    }
  });
})();
</script>
{% endblock %}