remove backend

templates/components/auth/auth-modal.html

@@ -0,0 +1,367 @@
+{% comment %}
+Enhanced Authentication Modal Component
+Matches React frontend AuthDialog functionality with modal-based auth
+{% endcomment %}
+
+{% load static %}
+{% load i18n %}
+{% load account socialaccount %}
+
+<!-- Auth Modal Component -->
+<div 
+  x-data="authModal" 
+  x-show="open" 
+  x-cloak
+  x-init="window.authModalOriginal = $data"
+  class="fixed inset-0 z-50 flex items-center justify-center"
+  @keydown.escape.window="close()"
+>
+  <!-- Modal Overlay -->
+  <div 
+    x-show="open"
+    x-transition:enter="transition-opacity ease-linear duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition-opacity ease-linear duration-300"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fixed inset-0 bg-background/80 backdrop-blur-sm"
+    @click="close()"
+  ></div>
+
+  <!-- Modal Content -->
+  <div 
+    x-show="open"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="transform opacity-0 scale-95"
+    x-transition:enter-end="transform opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="transform opacity-100 scale-100"
+    x-transition:leave-end="transform opacity-0 scale-95"
+    class="relative w-full max-w-md mx-4 bg-background border rounded-lg shadow-lg"
+    @click.stop
+  >
+    <!-- Close Button -->
+    <button 
+      @click="close()"
+      class="absolute top-4 right-4 p-2 text-muted-foreground hover:text-foreground rounded-md hover:bg-accent transition-colors"
+    >
+      <i class="fas fa-times w-4 h-4"></i>
+    </button>
+
+    <!-- Login Form -->
+    <div x-show="mode === 'login'" class="p-6">
+      <div class="text-center mb-6">
+        <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-700">
+          Sign In
+        </h2>
+        <p class="text-sm text-muted-foreground mt-2">
+          Enter your credentials to access your account
+        </p>
+      </div>
+
+      <!-- Social Login Buttons -->
+      <div x-show="socialProviders.length > 0" class="mb-6">
+        <div class="grid grid-cols-2 gap-4" x-show="!socialLoading">
+          <template x-for="provider in socialProviders" :key="provider.id">
+            <button
+              @click="handleSocialLogin(provider.id)"
+              class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-md transition-colors"
+              :class="{
+                'bg-[#4285F4] hover:bg-[#357AE8]': provider.id === 'google',
+                'bg-[#5865F2] hover:bg-[#4752C4]': provider.id === 'discord',
+                'bg-primary hover:bg-primary/90': !['google', 'discord'].includes(provider.id)
+              }"
+            >
+              <i 
+                class="mr-2 w-4 h-4"
+                :class="{
+                  'fab fa-google': provider.id === 'google',
+                  'fab fa-discord': provider.id === 'discord'
+                }"
+              ></i>
+              <span x-text="provider.name"></span>
+            </button>
+          </template>
+        </div>
+        
+        <div x-show="socialLoading" class="grid grid-cols-2 gap-4">
+          <div class="h-10 bg-muted animate-pulse rounded-md"></div>
+          <div class="h-10 bg-muted animate-pulse rounded-md"></div>
+        </div>
+
+        <!-- Divider -->
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-muted"></div>
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Login Form -->
+      <form 
+        @submit.prevent="handleLogin()"
+        class="space-y-4"
+      >
+        <div class="space-y-2">
+          <label for="login-username" class="text-sm font-medium">
+            Email or Username
+          </label>
+          <input
+            id="login-username"
+            type="text"
+            x-model="loginForm.username"
+            placeholder="Enter your email or username"
+            class="input w-full"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="login-password" class="text-sm font-medium">
+            Password
+          </label>
+          <div class="relative">
+            <input
+              id="login-password"
+              :type="showPassword ? 'text' : 'password'"
+              x-model="loginForm.password"
+              placeholder="Enter your password"
+              class="input w-full pr-10"
+              required
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <a
+            href="{% url 'account_reset_password' %}"
+            class="text-sm text-primary hover:text-primary/80 underline-offset-4 hover:underline font-medium"
+          >
+            Forgot password?
+          </a>
+        </div>
+
+        <!-- Error Messages -->
+        <div x-show="loginError" class="p-3 text-sm text-destructive-foreground bg-destructive/10 border border-destructive/20 rounded-md">
+          <span x-text="loginError"></span>
+        </div>
+
+        <button 
+          type="submit" 
+          :disabled="loginLoading"
+          class="btn btn-default w-full bg-gradient-to-r from-blue-600 to-purple-700 hover:from-blue-700 hover:to-purple-800 text-white"
+        >
+          <span x-show="!loginLoading">Sign In</span>
+          <span x-show="loginLoading" class="flex items-center">
+            <i class="fas fa-spinner fa-spin mr-2"></i>
+            Signing in...
+          </span>
+        </button>
+      </form>
+
+      <!-- Switch to Register -->
+      <div class="text-center text-sm text-muted-foreground mt-6">
+        Don't have an account?
+        <button
+          @click="switchToRegister()"
+          class="text-primary hover:underline font-medium ml-1"
+          type="button"
+        >
+          Sign up
+        </button>
+      </div>
+    </div>
+
+    <!-- Register Form -->
+    <div x-show="mode === 'register'" class="p-6">
+      <div class="text-center mb-6">
+        <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-700">
+          Create Account
+        </h2>
+        <p class="text-sm text-muted-foreground mt-2">
+          Join ThrillWiki to start exploring theme parks
+        </p>
+      </div>
+
+      <!-- Social Registration Buttons -->
+      <div x-show="socialProviders.length > 0" class="mb-6">
+        <div class="grid grid-cols-2 gap-4" x-show="!socialLoading">
+          <template x-for="provider in socialProviders" :key="provider.id">
+            <button
+              @click="handleSocialLogin(provider.id)"
+              class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-md transition-colors"
+              :class="{
+                'bg-[#4285F4] hover:bg-[#357AE8]': provider.id === 'google',
+                'bg-[#5865F2] hover:bg-[#4752C4]': provider.id === 'discord',
+                'bg-primary hover:bg-primary/90': !['google', 'discord'].includes(provider.id)
+              }"
+            >
+              <i 
+                class="mr-2 w-4 h-4"
+                :class="{
+                  'fab fa-google': provider.id === 'google',
+                  'fab fa-discord': provider.id === 'discord'
+                }"
+              ></i>
+              <span x-text="provider.name"></span>
+            </button>
+          </template>
+        </div>
+
+        <!-- Divider -->
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-muted"></div>
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background px-2 text-muted-foreground">
+              Or continue with email
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Register Form -->
+      <form 
+        @submit.prevent="handleRegister()"
+        class="space-y-4"
+      >
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <label for="register-first-name" class="text-sm font-medium">
+              First Name
+            </label>
+            <input
+              id="register-first-name"
+              type="text"
+              x-model="registerForm.first_name"
+              placeholder="First name"
+              class="input w-full"
+              required
+            />
+          </div>
+          <div class="space-y-2">
+            <label for="register-last-name" class="text-sm font-medium">
+              Last Name
+            </label>
+            <input
+              id="register-last-name"
+              type="text"
+              x-model="registerForm.last_name"
+              placeholder="Last name"
+              class="input w-full"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-email" class="text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="register-email"
+            type="email"
+            x-model="registerForm.email"
+            placeholder="Enter your email"
+            class="input w-full"
+            required
+          />
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-username" class="text-sm font-medium">
+            Username
+          </label>
+          <input
+            id="register-username"
+            type="text"
+            x-model="registerForm.username"
+            placeholder="Choose a username"
+            class="input w-full"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="register-password" class="text-sm font-medium">
+            Password
+          </label>
+          <div class="relative">
+            <input
+              id="register-password"
+              :type="showPassword ? 'text' : 'password'"
+              x-model="registerForm.password1"
+              placeholder="Create a password"
+              class="input w-full pr-10"
+              required
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-password2" class="text-sm font-medium">
+            Confirm Password
+          </label>
+          <input
+            id="register-password2"
+            :type="showPassword ? 'text' : 'password'"
+            x-model="registerForm.password2"
+            placeholder="Confirm your password"
+            class="input w-full"
+            required
+          />
+        </div>
+
+        <!-- Error Messages -->
+        <div x-show="registerError" class="p-3 text-sm text-destructive-foreground bg-destructive/10 border border-destructive/20 rounded-md">
+          <span x-text="registerError"></span>
+        </div>
+
+        <button 
+          type="submit" 
+          :disabled="registerLoading"
+          class="btn btn-default w-full bg-gradient-to-r from-blue-600 to-purple-700 hover:from-blue-700 hover:to-purple-800 text-white"
+        >
+          <span x-show="!registerLoading">Create Account</span>
+          <span x-show="registerLoading" class="flex items-center">
+            <i class="fas fa-spinner fa-spin mr-2"></i>
+            Creating account...
+          </span>
+        </button>
+      </form>
+
+      <!-- Switch to Login -->
+      <div class="text-center text-sm text-muted-foreground mt-6">
+        Already have an account?
+        <button
+          @click="switchToLogin()"
+          class="text-primary hover:underline font-medium ml-1"
+          type="button"
+        >
+          Sign in
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

templates/components/card.html

@@ -0,0 +1,80 @@
+{% comment %}
+Reusable card component for consistent styling across the application.
+Usage: {% include 'components/card.html' with title="Card Title" content="Card content" %}
+{% endcomment %}
+
+<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 overflow-hidden {{ extra_classes|default:'' }}">
+    {% if image_url %}
+    <div class="aspect-w-16 aspect-h-9">
+        <img 
+            src="{{ image_url }}" 
+            alt="{{ image_alt|default:title }}"
+            class="w-full h-48 object-cover"
+            loading="lazy"
+        >
+    </div>
+    {% endif %}
+    
+    <div class="p-6">
+        {% if title %}
+        <h3 class="text-xl font-semibold text-gray-900 mb-2">
+            {% if link_url %}
+                <a href="{{ link_url }}" class="hover:text-blue-600 transition-colors">
+                    {{ title }}
+                </a>
+            {% else %}
+                {{ title }}
+            {% endif %}
+        </h3>
+        {% endif %}
+        
+        {% if subtitle %}
+        <p class="text-sm text-gray-500 mb-3">{{ subtitle }}</p>
+        {% endif %}
+        
+        {% if content %}
+        <div class="text-gray-700 mb-4">
+            {{ content|truncatewords:30 }}
+        </div>
+        {% endif %}
+        
+        {% if tags %}
+        <div class="flex flex-wrap gap-2 mb-4">
+            {% for tag in tags %}
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                {{ tag }}
+            </span>
+            {% endfor %}
+        </div>
+        {% endif %}
+        
+        {% if stats %}
+        <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
+            {% for stat in stats %}
+            <div class="flex items-center">
+                {% if stat.icon %}
+                <i class="{{ stat.icon }} mr-1"></i>
+                {% endif %}
+                <span>{{ stat.label }}: {{ stat.value }}</span>
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+        
+        {% if actions %}
+        <div class="flex items-center justify-between pt-4 border-t border-gray-200">
+            {% for action in actions %}
+            <a 
+                href="{{ action.url }}" 
+                class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            >
+                {% if action.icon %}
+                <i class="{{ action.icon }} mr-1"></i>
+                {% endif %}
+                {{ action.label }}
+            </a>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+</div>

templates/components/layout/enhanced_header.html

@@ -0,0 +1,472 @@
+{% comment %}
+Enhanced Header Component - Matches React Frontend Design
+Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
+{% endcomment %}
+
+{% load static %}
+
+<header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <div class="flex items-center h-14 px-4 gap-3 md:gap-4">
+    
+    <!-- Logo and Browse Menu -->
+    <div class="flex items-center gap-4 shrink-0">
+      <!-- Logo -->
+      <a href="{% url 'home' %}" class="flex items-center space-x-2 flex-shrink-0">
+        <div class="w-6 h-6 bg-purple-600 rounded flex items-center justify-center">
+          <span class="text-white text-xs font-bold">TW</span>
+        </div>
+        <span class="font-bold text-lg whitespace-nowrap">ThrillWiki</span>
+      </a>
+
+      <!-- Browse Menu (Desktop) -->
+      <div class="hidden md:block">
+        <div 
+          x-data="{ open: false }" 
+          @mouseenter="open = true" 
+          @mouseleave="open = false"
+          class="relative"
+        >
+          <button 
+            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent transition-colors"
+            @click="open = !open"
+          >
+            <i class="fas fa-compass w-4 h-4"></i>
+            Browse
+            <i class="fas fa-chevron-down w-4 h-4"></i>
+          </button>
+
+          <!-- Browse Dropdown -->
+          <div 
+            x-show="open"
+            x-transition:enter="transition ease-out duration-100"
+            x-transition:enter-start="transform opacity-0 scale-95"
+            x-transition:enter-end="transform opacity-100 scale-100"
+            x-transition:leave="transition ease-in duration-75"
+            x-transition:leave-start="transform opacity-100 scale-100"
+            x-transition:leave-end="transform opacity-0 scale-95"
+            x-cloak
+            class="absolute left-0 mt-2 w-[480px] p-6 bg-background border rounded-lg shadow-lg z-50"
+          >
+            <div class="grid grid-cols-2 gap-6">
+              <!-- Left Column -->
+              <div class="space-y-4">
+                <a 
+                  href="{% url 'parks:park_list' %}" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-map-marker-alt w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Parks</h3>
+                    <p class="text-xs text-muted-foreground">Explore theme parks worldwide</p>
+                  </div>
+                </a>
+
+                <a 
+                  href="{% url 'rides:manufacturer_list' %}" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-wrench w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Manufacturers</h3>
+                    <p class="text-xs text-muted-foreground">Ride and attraction manufacturers</p>
+                  </div>
+                </a>
+
+                <a 
+                  href="{% url 'parks:operator_list' %}" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-users w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Operators</h3>
+                    <p class="text-xs text-muted-foreground">Theme park operating companies</p>
+                  </div>
+                </a>
+              </div>
+
+              <!-- Right Column -->
+              <div class="space-y-4">
+                <a 
+                  href="{% url 'rides:global_ride_list' %}" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-rocket w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Rides</h3>
+                    <p class="text-xs text-muted-foreground">Discover rides and attractions</p>
+                  </div>
+                </a>
+
+                <a 
+                  href="{% url 'rides:designer_list' %}" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-drafting-compass w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Designers</h3>
+                    <p class="text-xs text-muted-foreground">Ride designers and architects</p>
+                  </div>
+                </a>
+
+                <a 
+                  href="#" 
+                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  @click="open = false"
+                >
+                  <i class="fas fa-trophy w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
+                  <div>
+                    <h3 class="font-semibold text-sm mb-1">Top Lists</h3>
+                    <p class="text-xs text-muted-foreground">Community rankings and favorites</p>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Center Search Bar -->
+    <div class="hidden md:flex flex-1 min-w-0 justify-center">
+      <!-- Enhanced Search -->
+      <div class="relative w-full min-w-0 max-w-xl lg:max-w-2xl" x-data="searchComponent">
+        <div class="relative">
+          <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
+          <input
+            type="search"
+            placeholder="Search parks, rides..."
+            class="w-full min-w-0 pl-10 pr-3 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            x-model="query"
+            @input.debounce.300ms="search()"
+            hx-get="{% url 'search:search' %}"
+            hx-trigger="input changed delay:300ms"
+            hx-target="#search-results"
+            hx-include="this"
+            name="q"
+          />
+        </div>
+        
+        <!-- Search Results Dropdown -->
+        <div 
+          id="search-results"
+          x-show="results.length > 0"
+          x-transition
+          x-cloak
+          class="absolute top-full left-0 right-0 mt-1 bg-background border rounded-md shadow-lg z-50 max-h-96 overflow-y-auto"
+        >
+          <!-- Search results will be populated by HTMX -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop Right Side -->
+    <div class="hidden md:flex items-center gap-4 shrink-0">
+      <!-- Search Button -->
+      <button 
+        type="submit"
+        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4"
+      >
+        Search
+      </button>
+
+      <!-- Theme Toggle -->
+      <button 
+        x-data="themeToggle"
+        @click="toggleTheme()"
+        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-12 w-12"
+      >
+        <i class="fas fa-sun h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
+        <i class="fas fa-moon absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
+        <span class="sr-only">Toggle theme</span>
+      </button>
+
+      <!-- User Icon -->
+      <div class="relative" x-data="{ open: false }" @click.outside="open = false">
+        <button 
+          @click="open = !open"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-12 w-12"
+        >
+          {% if user.is_authenticated %}
+            {% if user.profile.avatar %}
+              <img 
+                src="{{ user.profile.avatar.url }}" 
+                alt="{{ user.get_full_name|default:user.username }}"
+                class="h-8 w-8 rounded-full object-cover"
+              />
+            {% else %}
+              <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
+                {{ user.get_full_name.0|default:user.username.0|upper }}
+              </div>
+            {% endif %}
+          {% else %}
+            <i class="fas fa-user h-6 w-6"></i>
+          {% endif %}
+        </button>
+        
+        <!-- User Dropdown -->
+        <div 
+          x-show="open"
+          x-transition:enter="transition ease-out duration-100"
+          x-transition:enter-start="transform opacity-0 scale-95"
+          x-transition:enter-end="transform opacity-100 scale-100"
+          x-transition:leave="transition ease-in duration-75"
+          x-transition:leave-start="transform opacity-100 scale-100"
+          x-transition:leave-end="transform opacity-0 scale-95"
+          x-cloak
+          class="absolute right-0 top-full mt-2 w-48 bg-background border rounded-md shadow-lg z-50"
+        >
+          {% if user.is_authenticated %}
+            <div class="flex items-center justify-start gap-2 p-3">
+              <div class="flex flex-col space-y-1 leading-none">
+                <p class="font-medium">{{ user.get_full_name|default:user.username }}</p>
+                <p class="w-[180px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
+              </div>
+            </div>
+            <div class="border-t"></div>
+            <a href="{% url 'profile' user.username %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
+              <i class="fas fa-user mr-2 h-4 w-4"></i>
+              Profile
+            </a>
+            <a href="{% url 'settings' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
+              <i class="fas fa-cog mr-2 h-4 w-4"></i>
+              Settings
+            </a>
+            {% if has_moderation_access %}
+            <a href="{% url 'moderation:dashboard' %}" class="flex items-center px-3 py-2 text-sm hover:bg-accent" @click="open = false">
+              <i class="fas fa-shield-alt mr-2 h-4 w-4"></i>
+              Moderation
+            </a>
+            {% endif %}
+            <div class="border-t"></div>
+            <form method="post" action="{% url 'account_logout' %}">
+              {% csrf_token %}
+              <button type="submit" class="flex items-center w-full px-3 py-2 text-sm text-red-600 hover:bg-accent">
+                <i class="fas fa-sign-out-alt mr-2 h-4 w-4"></i>
+                Log out
+              </button>
+            </form>
+          {% else %}
+            <div class="p-2">
+              <button 
+                @click="window.authModal.show('login'); open = false"
+                class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
+              >
+                <i class="fas fa-sign-in-alt mr-2 h-4 w-4"></i>
+                Login
+              </button>
+              <button 
+                @click="window.authModal.show('register'); open = false"
+                class="flex items-center w-full px-3 py-2 text-sm hover:bg-accent rounded-md"
+              >
+                <i class="fas fa-user-plus mr-2 h-4 w-4"></i>
+                Register
+              </button>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div class="md:hidden flex items-center space-x-2 flex-shrink-0">
+      <!-- Theme Toggle (Mobile) -->
+      <div x-data="themeToggle">
+        <button 
+          @click="toggleTheme()"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+        >
+          <i class="fas fa-sun h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
+          <i class="fas fa-moon absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
+        </button>
+      </div>
+
+      <!-- Mobile User Menu -->
+      {% if user.is_authenticated %}
+        <div class="relative" x-data="{ open: false }" @click.outside="open = false">
+          <button @click="open = !open" class="relative h-8 w-8 rounded-full">
+            {% if user.profile.avatar %}
+              <img 
+                src="{{ user.profile.avatar.url }}" 
+                alt="{{ user.get_full_name|default:user.username }}"
+                class="h-8 w-8 rounded-full object-cover"
+              />
+            {% else %}
+              <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-sm font-medium">
+                {{ user.get_full_name.0|default:user.username.0|upper }}
+              </div>
+            {% endif %}
+          </button>
+
+          <!-- Mobile User Dropdown -->
+          <div 
+            x-show="open"
+            x-transition
+            x-cloak
+            class="absolute right-0 mt-2 w-56 bg-background border rounded-md shadow-lg z-50"
+          >
+            <div class="flex items-center justify-start gap-2 p-2">
+              <div class="flex flex-col space-y-1 leading-none">
+                <p class="font-medium">{{ user.get_full_name|default:user.username }}</p>
+                <p class="w-[200px] truncate text-sm text-muted-foreground">{{ user.email }}</p>
+              </div>
+            </div>
+            <div class="border-t"></div>
+            <form method="post" action="{% url 'account_logout' %}">
+              {% csrf_token %}
+              <button type="submit" class="flex items-center w-full px-2 py-2 text-sm text-red-600 hover:bg-accent">
+                <i class="fas fa-sign-out-alt mr-2 h-4 w-4"></i>
+                Log out
+              </button>
+            </form>
+          </div>
+        </div>
+      {% else %}
+        <div class="flex items-center gap-1">
+          <c-button 
+            variant="outline" 
+            size="default"
+            hx_get="{% url 'account_login' %}"
+            hx_target="body"
+            hx_swap="beforeend"
+          >
+            Login
+          </c-button>
+          <c-button 
+            variant="default" 
+            size="default"
+            hx_get="{% url 'account_signup' %}"
+            hx_target="body"
+            hx_swap="beforeend"
+          >
+            Join
+          </c-button>
+        </div>
+      {% endif %}
+
+      <!-- Mobile Menu Button -->
+      <div x-data="{ open: false }">
+        <button 
+          @click="open = !open"
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+        >
+          <i class="fas fa-bars h-5 w-5"></i>
+        </button>
+
+        <!-- Mobile Menu Overlay -->
+        <div 
+          x-show="open"
+          x-transition:enter="transition-opacity ease-linear duration-300"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition-opacity ease-linear duration-300"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+          class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+          @click="open = false"
+        >
+          <!-- Mobile Menu Panel -->
+          <div 
+            x-show="open"
+            x-transition:enter="transition ease-in-out duration-300 transform"
+            x-transition:enter-start="translate-x-full"
+            x-transition:enter-end="translate-x-0"
+            x-transition:leave="transition ease-in-out duration-300 transform"
+            x-transition:leave-start="translate-x-0"
+            x-transition:leave-end="translate-x-full"
+            class="fixed right-0 top-0 h-full w-full sm:w-96 bg-background border-l shadow-lg"
+            @click.stop
+          >
+            <div class="flex flex-col h-full">
+              <!-- Mobile Menu Header -->
+              <div class="flex items-center justify-between p-4 border-b">
+                <div class="flex items-center space-x-2">
+                  <div class="w-6 h-6 bg-purple-600 rounded flex items-center justify-center">
+                    <span class="text-white text-xs font-bold">TW</span>
+                  </div>
+                  <span class="font-bold text-lg">ThrillWiki</span>
+                </div>
+                <button 
+                  @click="open = false"
+                  class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
+                >
+                  <i class="fas fa-times h-5 w-5"></i>
+                </button>
+              </div>
+
+              <!-- Mobile Menu Content -->
+              <div class="flex-1 overflow-y-auto p-4 space-y-6">
+                <p class="text-sm text-muted-foreground">
+                  Navigate through the ultimate theme park database
+                </p>
+
+                <!-- Navigation Section -->
+                <div>
+                  <h3 class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+                    NAVIGATION
+                  </h3>
+                  <div class="space-y-1">
+                    <a href="{% url 'home' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-home w-4 h-4"></i>
+                      <span>Home</span>
+                    </a>
+                    <a href="{% url 'search:search' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-search w-4 h-4"></i>
+                      <span>Search</span>
+                    </a>
+                    <a href="{% url 'parks:park_list' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-map-marker-alt w-4 h-4"></i>
+                      <span>Parks</span>
+                    </a>
+                    <a href="{% url 'rides:global_ride_list' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-rocket w-4 h-4"></i>
+                      <span>Rides</span>
+                    </a>
+                    <a href="{% url 'rides:manufacturer_list' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-wrench w-4 h-4"></i>
+                      <span>Manufacturers</span>
+                    </a>
+                    <a href="{% url 'parks:operator_list' %}" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent transition-colors" @click="open = false">
+                      <i class="fas fa-building w-4 h-4"></i>
+                      <span>Operators</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile Search Bar -->
+  <div class="md:hidden border-t bg-background">
+    <div class="px-4 py-3">
+      <div class="flex items-center gap-2 w-full">
+        <div class="relative flex-1">
+          <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
+          <input
+            type="search"
+            placeholder="Search parks, rides..."
+            class="w-full pl-10 pr-3 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            hx-get="{% url 'search:search' %}"
+            hx-trigger="input changed delay:300ms"
+            hx-target="#mobile-search-results"
+            hx-include="this"
+            name="q"
+          />
+        </div>
+        <button type="submit" class="flex-shrink-0 inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 w-10">
+          <i class="fas fa-search h-4 w-4"></i>
+        </button>
+      </div>
+      <div id="mobile-search-results" class="mt-2"></div>
+    </div>
+  </div>
+</header>

templates/components/pagination.html

@@ -0,0 +1,93 @@
+{% comment %}
+Reusable pagination component with accessibility and responsive design.
+Usage: {% include 'components/pagination.html' with page_obj=page_obj %}
+{% endcomment %}
+
+{% if page_obj.has_other_pages %}
+<nav class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6" aria-label="Pagination">
+    <div class="hidden sm:block">
+        <p class="text-sm text-gray-700">
+            Showing
+            <span class="font-medium">{{ page_obj.start_index }}</span>
+            to
+            <span class="font-medium">{{ page_obj.end_index }}</span>
+            of
+            <span class="font-medium">{{ page_obj.paginator.count }}</span>
+            results
+        </p>
+    </div>
+    
+    <div class="flex-1 flex justify-between sm:justify-end">
+        {% if page_obj.has_previous %}
+        <a 
+            href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.previous_page_number }}"
+            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            aria-label="Go to previous page"
+        >
+            <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+            Previous
+        </a>
+        {% else %}
+        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-400 bg-gray-100 cursor-not-allowed">
+            <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+            Previous
+        </span>
+        {% endif %}
+        
+        <!-- Page numbers for larger screens -->
+        <div class="hidden md:flex">
+            {% for num in page_obj.paginator.page_range %}
+                {% if num == page_obj.number %}
+                <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600 mx-1">
+                    {{ num }}
+                </span>
+                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
+                <a 
+                    href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ num }}"
+                    class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mx-1 transition-colors"
+                    aria-label="Go to page {{ num }}"
+                >
+                    {{ num }}
+                </a>
+                {% elif num == 1 or num == page_obj.paginator.num_pages %}
+                <a 
+                    href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ num }}"
+                    class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mx-1 transition-colors"
+                    aria-label="Go to page {{ num }}"
+                >
+                    {{ num }}
+                </a>
+                {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
+                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 mx-1">
+                    ...
+                </span>
+                {% endif %}
+            {% endfor %}
+        </div>
+        
+        {% if page_obj.has_next %}
+        <a 
+            href="?{% if request.GET.urlencode %}{{ request.GET.urlencode }}&{% endif %}page={{ page_obj.next_page_number }}"
+            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            aria-label="Go to next page"
+        >
+            Next
+            <svg class="ml-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+            </svg>
+        </a>
+        {% else %}
+        <span class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-400 bg-gray-100 cursor-not-allowed">
+            Next
+            <svg class="ml-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+            </svg>
+        </span>
+        {% endif %}
+    </div>
+</nav>
+{% endif %}

templates/components/search_form.html

@@ -0,0 +1,142 @@
+{% comment %}
+Reusable search form component with filtering capabilities.
+Usage: {% include 'components/search_form.html' with placeholder="Search parks..." filters=filter_options %}
+{% endcomment %}
+
+<form method="get" class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <!-- Search Input -->
+        <div class="col-span-1 md:col-span-2">
+            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">
+                Search
+            </label>
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </div>
+                <input 
+                    type="text" 
+                    name="search" 
+                    id="search"
+                    value="{{ request.GET.search }}"
+                    placeholder="{{ placeholder|default:'Search...' }}"
+                    class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                >
+            </div>
+        </div>
+        
+        {% if filters %}
+        {% for filter in filters %}
+        <div>
+            <label for="{{ filter.name }}" class="block text-sm font-medium text-gray-700 mb-1">
+                {{ filter.label }}
+            </label>
+            
+            {% if filter.type == 'select' %}
+            <select 
+                name="{{ filter.name }}" 
+                id="{{ filter.name }}"
+                class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            >
+                <option value="">All {{ filter.label }}</option>
+                {% for option in filter.options %}
+                <option 
+                    value="{{ option.value }}" 
+                    {% if request.GET|get_item:filter.name == option.value %}selected{% endif %}
+                >
+                    {{ option.label }}
+                </option>
+                {% endfor %}
+            </select>
+            
+            {% elif filter.type == 'checkbox' %}
+            <div class="space-y-2">
+                {% for option in filter.options %}
+                <label class="flex items-center">
+                    <input 
+                        type="checkbox" 
+                        name="{{ filter.name }}" 
+                        value="{{ option.value }}"
+                        {% if option.value in request.GET|getlist:filter.name %}checked{% endif %}
+                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    >
+                    <span class="ml-2 text-sm text-gray-700">{{ option.label }}</span>
+                </label>
+                {% endfor %}
+            </div>
+            
+            {% elif filter.type == 'range' %}
+            <div class="flex space-x-2">
+                <input 
+                    type="number" 
+                    name="{{ filter.name }}_min" 
+                    value="{{ request.GET|get_item:filter.name_min }}"
+                    placeholder="Min"
+                    class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                >
+                <input 
+                    type="number" 
+                    name="{{ filter.name }}_max" 
+                    value="{{ request.GET|get_item:filter.name_max }}"
+                    placeholder="Max"
+                    class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                >
+            </div>
+            {% endif %}
+        </div>
+        {% endfor %}
+        {% endif %}
+    </div>
+    
+    <!-- Action Buttons -->
+    <div class="mt-4 flex items-center justify-between">
+        <div class="flex space-x-3">
+            <button 
+                type="submit"
+                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            >
+                <svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Search
+            </button>
+            
+            {% if request.GET.urlencode %}
+            <a 
+                href="{{ request.path }}"
+                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            >
+                <svg class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                Clear
+            </a>
+            {% endif %}
+        </div>
+        
+        {% if show_sort %}
+        <div class="flex items-center space-x-2">
+            <label for="ordering" class="text-sm font-medium text-gray-700">Sort by:</label>
+            <select 
+                name="ordering" 
+                id="ordering"
+                onchange="this.form.submit()"
+                class="block px-3 py-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            >
+                {% for option in sort_options|default:"name,Name (A-Z);-name,Name (Z-A);created_at,Newest First;-created_at,Oldest First" %}
+                {% with option_parts=option|split:"," %}
+                <option 
+                    value="{{ option_parts.0 }}" 
+                    {% if request.GET.ordering == option_parts.0 %}selected{% endif %}
+                >
+                    {{ option_parts.1 }}
+                </option>
+                {% endwith %}
+                {% endfor %}
+            </select>
+        </div>
+        {% endif %}
+    </div>
+</form>

templates/components/status_badge.html

@@ -0,0 +1,17 @@
+{% comment %}
+Reusable status badge component with consistent styling.
+Usage: {% include 'components/status_badge.html' with status="OPERATING" %}
+{% endcomment %}
+
+{% load park_tags %}
+
+{% with status_config=status|get_status_config %}
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ status_config.classes }}">
+    {% if status_config.icon %}
+    <svg class="-ml-0.5 mr-1.5 h-2 w-2" fill="currentColor" viewBox="0 0 8 8">
+        <circle cx="4" cy="4" r="3" />
+    </svg>
+    {% endif %}
+    {{ status_config.label }}
+</span>
+{% endwith %}

templates/components/ui/button.html

@@ -0,0 +1,63 @@
+{% comment %}
+Button Component - Django Template Version of shadcn/ui Button
+Usage: <c-button variant="default" size="default">Click me</c-button>
+{% endcomment %}
+
+{% load static %}
+
+{% with variant=variant|default:'default' size=size|default:'default' %}
+<button 
+  class="
+    inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 
+    ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 
+    focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
+    {% if variant == 'default' %}
+      bg-primary text-primary-foreground hover:bg-primary/90
+    {% elif variant == 'destructive' %}
+      bg-destructive text-destructive-foreground hover:bg-destructive/90
+    {% elif variant == 'outline' %}
+      border border-input bg-background hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'secondary' %}
+      bg-secondary text-secondary-foreground hover:bg-secondary/80
+    {% elif variant == 'ghost' %}
+      hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'link' %}
+      text-primary underline-offset-4 hover:underline
+    {% endif %}
+    {% if size == 'default' %}
+      h-10 px-4 py-2
+    {% elif size == 'sm' %}
+      h-9 rounded-md px-3
+    {% elif size == 'lg' %}
+      h-11 rounded-md px-8
+    {% elif size == 'icon' %}
+      h-10 w-10
+    {% endif %}
+    {{ class|default:'' }}
+  "
+  {% if type %}type="{{ type }}"{% endif %}
+  {% if onclick %}onclick="{{ onclick }}"{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if x_data %}x-data="{{ x_data }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {{ attrs|default:'' }}
+>
+  {% if icon_left %}
+    <i class="{{ icon_left }} w-4 h-4"></i>
+  {% endif %}
+  
+  {% if text %}
+    {{ text }}
+  {% else %}
+    {{ content|default:'' }}
+  {% endif %}
+  
+  {% if icon_right %}
+    <i class="{{ icon_right }} w-4 h-4"></i>
+  {% endif %}
+</button>
+{% endwith %}

templates/components/ui/card.html

@@ -0,0 +1,37 @@
+{% comment %}
+Card Component - Django Template Version of shadcn/ui Card
+Usage: <c-card title="Card Title" content="Card content" />
+{% endcomment %}
+
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class|default:'' }}">
+  {% if title or header_content %}
+  <div class="flex flex-col space-y-1.5 p-6">
+    {% if title %}
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
+    {% endif %}
+    {% if description %}
+    <p class="text-sm text-muted-foreground">{{ description }}</p>
+    {% endif %}
+    {% if header_content %}
+    {{ header_content|safe }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if content or body_content %}
+  <div class="p-6 pt-0">
+    {% if content %}
+    {{ content|safe }}
+    {% endif %}
+    {% if body_content %}
+    {{ body_content|safe }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if footer_content %}
+  <div class="flex items-center p-6 pt-0">
+    {{ footer_content|safe }}
+  </div>
+  {% endif %}
+</div>

templates/components/ui/input.html

@@ -0,0 +1,26 @@
+{% comment %}
+Input Component - Django Template Version of shadcn/ui Input
+Usage: <c-input type="text" placeholder="Enter text..." name="field_name" />
+{% endcomment %}
+
+<input 
+  type="{{ type|default:'text' }}"
+  class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ class|default:'' }}"
+  {% if name %}name="{{ name }}"{% endif %}
+  {% if id %}id="{{ id }}"{% endif %}
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if value %}value="{{ value }}"{% endif %}
+  {% if required %}required{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {% if readonly %}readonly{% endif %}
+  {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
+  {% if x_model %}x-model="{{ x_model }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if hx_include %}hx-include="{{ hx_include }}"{% endif %}
+  {{ attrs|default:'' }}
+/>

templates/components/ui/toast-container.html

@@ -0,0 +1,90 @@
+{% comment %}
+Toast Notification Container Component
+Matches React frontend toast functionality with Sonner-like behavior
+{% endcomment %}
+
+<!-- Toast Container -->
+<div 
+  x-data="{}"
+  x-show="$store.toast.toasts.length > 0"
+  class="fixed top-4 right-4 z-50 space-y-2"
+  x-cloak
+>
+  <template x-for="toast in $store.toast.toasts" :key="toast.id">
+    <div 
+      x-show="toast.visible"
+      x-transition:enter="transition ease-out duration-300"
+      x-transition:enter-start="transform opacity-0 translate-x-full"
+      x-transition:enter-end="transform opacity-100 translate-x-0"
+      x-transition:leave="transition ease-in duration-200"
+      x-transition:leave-start="transform opacity-100 translate-x-0"
+      x-transition:leave-end="transform opacity-0 translate-x-full"
+      class="relative max-w-sm w-full bg-background border rounded-lg shadow-lg overflow-hidden"
+      :class="{
+        'border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-800': toast.type === 'success',
+        'border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800': toast.type === 'error',
+        'border-yellow-200 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-800': toast.type === 'warning',
+        'border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800': toast.type === 'info'
+      }"
+    >
+      <!-- Progress Bar -->
+      <div 
+        class="absolute top-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear"
+        :style="`width: ${toast.progress}%`"
+        :class="{
+          'text-green-500': toast.type === 'success',
+          'text-red-500': toast.type === 'error',
+          'text-yellow-500': toast.type === 'warning',
+          'text-blue-500': toast.type === 'info'
+        }"
+      ></div>
+
+      <div class="p-4">
+        <div class="flex items-start">
+          <!-- Icon -->
+          <div class="flex-shrink-0 mr-3">
+            <i 
+              class="w-5 h-5"
+              :class="{
+                'fas fa-check-circle text-green-500': toast.type === 'success',
+                'fas fa-exclamation-circle text-red-500': toast.type === 'error',
+                'fas fa-exclamation-triangle text-yellow-500': toast.type === 'warning',
+                'fas fa-info-circle text-blue-500': toast.type === 'info'
+              }"
+            ></i>
+          </div>
+
+          <!-- Message -->
+          <div class="flex-1 min-w-0">
+            <p 
+              class="text-sm font-medium"
+              :class="{
+                'text-green-800 dark:text-green-200': toast.type === 'success',
+                'text-red-800 dark:text-red-200': toast.type === 'error',
+                'text-yellow-800 dark:text-yellow-200': toast.type === 'warning',
+                'text-blue-800 dark:text-blue-200': toast.type === 'info'
+              }"
+              x-text="toast.message"
+            ></p>
+          </div>
+
+          <!-- Close Button -->
+          <div class="flex-shrink-0 ml-3">
+            <button
+              @click="$store.toast.hide(toast.id)"
+              class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
+              :class="{
+                'text-green-500 hover:bg-green-100 focus:ring-green-500 dark:hover:bg-green-800': toast.type === 'success',
+                'text-red-500 hover:bg-red-100 focus:ring-red-500 dark:hover:bg-red-800': toast.type === 'error',
+                'text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-500 dark:hover:bg-yellow-800': toast.type === 'warning',
+                'text-blue-500 hover:bg-blue-100 focus:ring-blue-500 dark:hover:bg-blue-800': toast.type === 'info'
+              }"
+            >
+              <i class="fas fa-times w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>