{{ define "layout" }}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/x-icon" href="../../static/favicon.ico">

        <title>{{if .Title}}{{.Title}}{{else}}Poll System{{end}}</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="//unpkg.com/alpinejs" defer></script>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
        />
    </head>
    <body class="bg-gray-50 font-sans">
        {{ if .IsAuthenticated }}
        <!-- Authenticated User Interface -->
        <div class="min-h-screen" x-data="{ mobileMenuOpen: false }">
            
<!-- Simple Navigation Bar -->
            <nav class="bg-gray-700 border-b border-gray-600 fixed top-0 left-0 w-full z-50">
                <div class="max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 ">
                    <div class="flex justify-between items-center h-14 ">
                        
                        <!-- Left: Logo and Navigation Links -->
                        <div class="flex items-center space-x-12">
                            <!-- Logo -->
                            <div class="flex items-center space-x-4">
                                <img src="../../static/icon-512.png" alt="Logo" class="w-6 h-6"/>
                                <span class="text-xl font-semibold text-white">Poll System</span>
                            </div>

                        </div>

                            <!-- Desktop Navigation Links -->
                            <div class="hidden md:flex items-center space-x-10">
                                {{ if .ShowAdminNav }}
                                <a href="/dashboard" class="text-sm font-medium {{if eq .ActiveSection "dashboard"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Dashboard
                                </a>
                                <a href="/volunteers" class="text-sm font-medium {{if eq .ActiveSection "volunteer"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Volunteers
                                </a>
                                <a href="/team_builder" class="text-sm font-medium {{if eq .ActiveSection "team_builder"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Team Builder
                                </a>
                                <a href="/addresses" class="text-sm font-medium {{if eq .ActiveSection "address"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Addresses
                                </a>
                                <a href="/posts" class="text-sm font-medium {{if eq .ActiveSection "post"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Posts
                                </a>
                                <a href="/reports" class="text-sm font-medium {{if eq .ActiveSection "report"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Reports
                                </a>
                                {{ end }}

                                {{ if .ShowVolunteerNav }}
                                <a href="/volunteer/dashboard" class="text-sm font-medium {{if eq .ActiveSection "dashboard"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Dashboard
                                </a>
                                <a href="/volunteer/Addresses" class="text-sm font-medium {{if eq .ActiveSection "address"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Assigned Address
                                </a>
                                <a href="/volunteer/schedual" class="text-sm font-medium {{if eq .ActiveSection "schedual"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    My Schedule
                                </a>
                                {{ end }}

                                <a href="/profile" class="text-sm font-medium {{if eq .ActiveSection "profile"}}text-blue-300 border-b-2 border-blue-300{{else}}text-gray-300 hover:text-white{{end}} py-3 px-1">
                                    Profile
                                </a>
                            </div>

                        <!-- Right: User Info and Actions -->
                        <div class="flex items-center space-x-4">
                            <!-- User Avatar and Name -->
                            <div class="hidden sm:flex items-center space-x-3">
                                <span class="text-sm text-gray-300">{{.UserName}}</span>
                                <div class="w-8 h-8 bg-blue-500 flex items-center justify-center text-white font-medium rounded-full">
                                    {{slice .UserName 0 1}}
                                </div>
                            </div>

                            <!-- Logout Button -->
                            <a href="/logout" class="hidden sm:flex items-center px-3 py-2 text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-600 rounded-md">
                                <i class="fas fa-sign-out-alt mr-2"></i>
                                Logout
                            </a>

                            <!-- Mobile Menu Button -->
                            <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 rounded-md text-gray-300 hover:text-white hover:bg-gray-600">
                                <i class="fas fa-bars" x-show="!mobileMenuOpen"></i>
                                <i class="fas fa-times" x-show="mobileMenuOpen"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Mobile Navigation Menu -->
                    <div x-show="mobileMenuOpen" 
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 scale-95"
                         x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 scale-100"
                         x-transition:leave-end="opacity-0 scale-95"
                         class="md:hidden border-t border-gray-600"
                         @click.outside="mobileMenuOpen = false">
                        
                        <div class="px-4 py-4 bg-gray-800">
                            <!-- User Info Mobile -->
                            <div class="flex items-center space-x-3 pb-4 mb-4 border-b border-gray-600">
                                <div class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-medium rounded-full">
                                    {{slice .UserName 0 1}}
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-white">{{.UserName}}</p>
                                    <p class="text-xs text-gray-400">Logged in</p>
                                </div>
                            </div>

                            <!-- Mobile Navigation Links -->
                            <div class="space-y-2">
                                {{ if .ShowAdminNav }}
                                <a href="/dashboard" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "dashboard"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-chart-pie mr-3 w-4"></i>Dashboard
                                </a>
                                <a href="/volunteers" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "volunteer"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-users mr-3 w-4"></i>Volunteers
                                </a>
                                <a href="/team_builder" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "team_builder"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-user-friends mr-3 w-4"></i>Team Builder
                                </a>
                                <a href="/addresses" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "address"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-map-marked-alt mr-3 w-4"></i>Addresses
                                </a>
                                <a href="/posts" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "post"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-blog mr-3 w-4"></i>Posts
                                </a>
                                <a href="/reports" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "report"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-table mr-3 w-4"></i>Reports
                                </a>
                                {{ end }}

                                {{ if .ShowVolunteerNav }}
                                <a href="/volunteer/dashboard" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "dashboard"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-chart-pie mr-3 w-4"></i>Dashboard
                                </a>
                                <a href="/volunteer/Addresses" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "address"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-home mr-3 w-4"></i>Assigned Address
                                </a>
                                <a href="/volunteer/schedual" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "schedual"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-calendar-alt mr-3 w-4"></i>My Schedule
                                </a>
                                {{ end }}

                                <a href="/profile" @click="mobileMenuOpen = false" 
                                   class="block px-3 py-2 rounded-md text-base font-medium {{if eq .ActiveSection "profile"}}text-blue-300 bg-gray-700{{else}}text-gray-300 hover:text-white hover:bg-gray-700{{end}}">
                                    <i class="fas fa-user-circle mr-3 w-4"></i>Profile
                                </a>

                                <!-- Logout for Mobile -->
                                <div class="border-t border-gray-600 pt-2 mt-4">
                                    <a href="/logout" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">
                                        <i class="fas fa-sign-out-alt mr-3 w-4"></i>Logout
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- Main Content Area -->
            <main class="flex-1 mt-14">
                <!--sm:px-4 lg:px-6-->
                <div class="max-w-9xl mx-auto overflow-hidden ">
                    {{ template "content" . }}
                </div>
            </main>
        </div>

        {{else}}
<!-- Landing Page (unchanged) -->
         <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linq - Poll System</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="min-h-screen" x-data="{ mobileMenuOpen: false }">
        
        <!-- Navigation -->         
        <nav class="bg-gray-700 border-b border-gray-600">             
            <div class="max-w-7xl mx-auto px-6">                 
                <div class="flex justify-between items-center h-14">                     
                    <!-- Logo -->                     
                    <div class="flex items-center gap-3">                         
                        <img src="../../static/icon-512.png" alt="Logo" class="w-8 h-8"/>                         
                        <span class="text-xl font-semibold text-white">Linq</span>                     
                    </div>                                          
                    
                    <!-- Desktop Navigation -->                     
                    <div class="hidden md:flex items-center gap-8">                         
                        <a href="#home" class="text-gray-300 hover:text-white py-3 px-1">Home</a>                         
                        <a href="#products" class="text-gray-300 hover:text-white py-3 px-1">Products</a>                         
                        <a href="#about" class="text-gray-300 hover:text-white py-3 px-1">About</a>                     
                    </div>                                          
                    
                    <!-- Auth Buttons -->                     
                    <div class="hidden md:flex items-center gap-3">                         
                        <button onclick="openLoginModal()" class="px-4 py-2 text-gray-300 hover:text-white">                             
                            Sign In                         
                        </button>                         
                        <button onclick="openRegisterModal()" class="px-6 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded">                             
                            Get Started                         
                        </button>                     
                    </div>                      
                    
                    <!-- Mobile Menu Button -->                     
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 text-gray-300 hover:text-white hover:bg-gray-600 rounded-md">                         
                        <i class="fas fa-bars" x-show="!mobileMenuOpen"></i>                         
                        <i class="fas fa-times" x-show="mobileMenuOpen"></i>                     
                    </button>                 
                </div>                  
                
                <!-- Mobile Menu -->                 
                <div x-show="mobileMenuOpen" class="md:hidden border-t border-gray-600 bg-gray-800">                     
                    <div class="px-6 py-4 space-y-3">                         
                        <a href="#home" @click="mobileMenuOpen = false" class="block py-2 text-gray-300 hover:text-white">Home</a>                         
                        <a href="#products" @click="mobileMenuOpen = false" class="block py-2 text-gray-300 hover:text-white">Products</a>                         
                        <a href="#about" @click="mobileMenuOpen = false" class="block py-2 text-gray-300 hover:text-white">About</a>                         
                        <div class="border-t border-gray-600 pt-3 space-y-2">                             
                            <button onclick="openLoginModal(); document.querySelector('[x-data]').__x.$data.mobileMenuOpen = false"                                      
                                    class="block w-full text-left py-2 text-gray-300 hover:text-white">                                 
                                Sign In                             
                            </button>                             
                            <button onclick="openRegisterModal(); document.querySelector('[x-data]').__x.$data.mobileMenuOpen = false"                                      
                                    class="block w-full py-2 bg-blue-500 text-white hover:bg-blue-600 rounded">                                 
                                Get Started                             
                            </button>                         
                        </div>                     
                    </div>                 
                </div>             
            </div>         
        </nav>

        <!-- Hero -->
        <section id="home" class="pt-40 pb-16 px-6 min-h-[600px]">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-6">
                    Simple Polling
                    <span class="text-blue-600">Management</span>
                </h1>
                
                <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
                    Manage volunteers and track polling operations efficiently.
                </p>
                
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button onclick="openRegisterModal()" class="px-8 py-3 bg-blue-600 text-white hover:bg-blue-700 font-medium rounded">
                        Start Free
                    </button>
                    <button onclick="openLoginModal()" class="px-8 py-3 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium rounded">
                        Sign In
                    </button>
                </div>
            </div>
        </section>

        <!-- Products Section -->
        <section id="products" class="py-16 bg-white min-h-[600px]">
            <div class="max-w-6xl mx-auto px-6">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Products</h2>
                    <p class="text-lg text-gray-600">Tools built for modern polling operations</p>
                </div>
                
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="p-6 border border-gray-200 rounded-lg">
                        <img src="../../static/icon-512.png" alt="Poll Manager" class="w-12 h-12 mb-4"/>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Poll Manager</h3>
                        <p class="text-gray-600 mb-4">Complete polling campaign management with real-time tracking and coordination tools.</p>
                        <ul class="text-sm text-gray-500 space-y-1">
                            <li>• Volunteer coordination</li>
                            <li>• Address management</li>
                            <li>• Progress tracking</li>
                        </ul>
                    </div>
                    
                    <div class="p-6 border border-gray-200 rounded-lg">
                        <img src="../../static/icon-512.png" alt="Analytics Suite" class="w-12 h-12 mb-4"/>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Analytics Suite</h3>
                        <p class="text-gray-600 mb-4">Advanced reporting and analytics dashboard for data-driven insights.</p>
                        <ul class="text-sm text-gray-500 space-y-1">
                            <li>• Performance metrics</li>
                            <li>• Custom reports</li>
                            <li>• Data visualization</li>
                        </ul>
                    </div>
                    
                    <div class="p-6 border border-gray-200 rounded-lg">
                        <img src="../../static/icon-512.png" alt="Team Builder" class="w-12 h-12 mb-4"/>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Team Builder</h3>
                        <p class="text-gray-600 mb-4">Organize teams and assign roles with automated scheduling and notifications.</p>
                        <ul class="text-sm text-gray-500 space-y-1">
                            <li>• Role assignment</li>
                            <li>• Schedule management</li>
                            <li>• Team communication</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- About -->
        <section id="about" class="py-16 bg-gray-50 min-h-[600px]">
            <div class="max-w-6xl mx-auto px-6">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 class="text-3xl font-bold text-gray-900 mb-6">About Linq</h2>
                        <p class="text-lg text-gray-600 mb-6">
                            Built for organizations that need efficient polling management. 
                            Our platform simplifies volunteer coordination and progress tracking.
                        </p>
                        
                        <div class="grid grid-cols-3 gap-6 mb-8">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-gray-900">500+</div>
                                <div class="text-sm text-gray-500">Volunteers</div>
                            </div>
                            <!-- <div class="text-center">
                                <div class="text-2xl font-bold text-gray-900">50+</div>
                                <div class="text-sm text-gray-500">Organizations</div>
                            </div> -->
                            <div class="text-center">
                                <div class="text-2xl font-bold text-gray-900">400,000+</div>
                                <div class="text-sm text-gray-500">Addresses</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white p-8 rounded-lg border border-gray-200">
                        <img src="../../static/feature-mobile4.jpg" alt="Dashboard Preview" class="w-full h-48 object-cover rounded mb-6 bg-gray-100"/>
                        <h3 class="text-xl font-semibold text-gray-900 mb-3">Simple Dashboard</h3>
                        <p class="text-gray-600">
                            Everything you need in one place. Track progress, manage teams, and generate reports.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="bg-white border-t border-gray-200 py-8">
            <div class="max-w-6xl mx-auto px-6">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <div class="flex items-center gap-3">
                        <img src="../../static/icon-512.png" alt="Logo" class="w-6 h-6"/>
                        <span class="font-semibold text-gray-900">Linq</span>
                    </div>
                    
                    <div class="flex items-center gap-6 text-sm text-gray-500">
                        <a href="#" class="hover:text-gray-900">Privacy</a>
                        <a href="#" class="hover:text-gray-900">Terms</a>
                        <a href="#" class="hover:text-gray-900">Contact</a>
                    </div>
                    
                    <p class="text-sm text-gray-500">&copy; 2025 Linq. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </div>
        <!-- Login Modal -->
        <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
            <div class="bg-white shadow-2xl max-w-4xl w-full overflow-hidden rounded-lg">
                <div class="flex flex-col lg:flex-row min-h-[500px]">
                    <!-- Left Side - Image -->
                    <div class="hidden lg:flex flex-1 bg-gradient-to-br from-blue-500 to-blue-700 flex-col items-center justify-center">
                        <img src="../../static/feature-mobile2.jpg" alt="Welcome Image" class="object-cover h-full rounded-lg shadow-lg">
                    </div>
                    <!-- Right Side - Form -->
                    <div class="flex-1 p-6 sm:p-8">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl sm:text-2xl font-bold text-gray-900">Sign In</h3>
                            <button onclick="closeLoginModal()" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                        <form method="POST" action="/login" class="space-y-6">
                            <div>
                                <label for="login_email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                <input type="email" name="email" id="login_email" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            </div>
                            <div>
                                <label for="login_password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                                <input type="password" name="password" id="login_password" required 
                                       class="w-full px-4 py-3 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            </div>
                            <button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors rounded">
                                Sign In
                            </button>
                        </form>
                        <p class="text-center text-sm text-gray-600 mt-6">
                            Don't have an account? 
                            <button onclick="switchToRegister()" class="text-blue-600 hover:text-blue-700 font-medium">Sign up</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Register Modal -->
        <div id="registerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
            <div class="bg-white shadow-2xl max-w-4xl w-full overflow-hidden rounded-lg">
                <div class="flex flex-col lg:flex-row min-h-[600px]">
                    <!-- Left Side - Image -->
                    <div class="hidden lg:flex flex-1 bg-gradient-to-br from-blue-600 to-blue-800 flex-col items-center justify-center">
                        <img src="../../static/feature-mobile1.jpg" alt="Welcome Image" class="object-cover h-full rounded-lg shadow-lg">
                    </div>

                    <!-- Right Side - Form -->
                    <div class="flex-1 p-6 sm:p-8 overflow-y-auto">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl sm:text-2xl font-bold text-gray-900">Create Account</h3>
                            <button onclick="closeRegisterModal()" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                        <form method="POST" action="/register" class="space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                                    <input type="text" name="first_name" id="first_name" required 
                                           class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                </div>
                                <div>
                                    <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                                    <input type="text" name="last_name" id="last_name" required 
                                           class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                </div>
                            </div>
                            <div>
                                <label for="register_email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" name="email" id="register_email" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                                <input type="tel" name="phone" id="phone" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            </div>
                            <div>
                                <label for="role" class="block text-sm font-medium text-gray-700 mb-1">Role</label>
                                <select name="role" id="role" required 
                                        class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                        onchange="toggleAdminCodeField()">
                                    <option value="">Select role</option>
                                    <option value="1">Admin</option>
                                    <option value="2">Team Leader</option>
                                    <option value="3">Volunteer</option>
                                </select>
                            </div>

                            <!-- Admin Code field (hidden by default) -->
                            <div id="adminCodeField" class="hidden">
                                <label for="admin_code" class="block text-sm font-medium text-gray-700 mb-1">Admin Code</label>
                                <input type="text" name="admin_code" id="admin_code"
                                       class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="Enter your admin's code">
                            </div>

                            <div>
                                <label for="register_password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                                <input type="password" name="password" id="register_password" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            </div>
                            <button type="submit" class="w-full bg-blue-600 text-white py-3 hover:bg-blue-700 font-medium transition-colors rounded mt-6">
                                Create Account
                            </button>
                        </form>
                        <p class="text-center text-sm text-gray-600 mt-4">
                            Already have an account? 
                            <button onclick="switchToLogin()" class="text-blue-600 hover:text-blue-700 font-medium">Sign in</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        {{end}}

        <script>
            // Initialize Alpine.js data for mobile menu
            document.addEventListener('alpine:init', () => {
                Alpine.data('sidebar', () => ({
                    open: false
                }));
            });

            // Smooth scrolling for navigation links
            document.addEventListener('DOMContentLoaded', function() {
                const links = document.querySelectorAll('a[href^="#"]');
                
                for (const link of links) {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const targetId = this.getAttribute('href').substring(1);
                        const targetElement = document.getElementById(targetId);
                        
                        if (targetElement) {
                            const offsetTop = targetElement.offsetTop - 80; // Account for fixed navbar
                            window.scrollTo({
                                top: offsetTop,
                                behavior: 'smooth'
                            });
                        }
                    });
                }
            });

            function openLoginModal() {
                document.getElementById('loginModal').classList.remove('hidden');
                document.getElementById('loginModal').classList.add('flex');
                document.body.style.overflow = 'hidden';
            }

            function closeLoginModal() {
                document.getElementById('loginModal').classList.add('hidden');
                document.getElementById('loginModal').classList.remove('flex');
                document.body.style.overflow = 'auto';
            }

            function openRegisterModal() {
                document.getElementById('registerModal').classList.remove('hidden');
                document.getElementById('registerModal').classList.add('flex');
                document.body.style.overflow = 'hidden';
            }

            function closeRegisterModal() {
                document.getElementById('registerModal').classList.add('hidden');
                document.getElementById('registerModal').classList.remove('flex');
                document.body.style.overflow = 'auto';
            }

            function switchToRegister() {
                closeLoginModal();
                setTimeout(() => openRegisterModal(), 100);
            }

            function switchToLogin() {
                closeRegisterModal();
                setTimeout(() => openLoginModal(), 100);
            }

            // Close modal when clicking outside
            window.onclick = function(event) {
                const loginModal = document.getElementById('loginModal');
                const registerModal = document.getElementById('registerModal');
                
                if (event.target === loginModal) {
                    closeLoginModal();
                }
                if (event.target === registerModal) {
                    closeRegisterModal();
                }
            }

            function toggleAdminCodeField() {
                const role = document.getElementById("role").value;
                const field = document.getElementById("adminCodeField");
                field.classList.toggle("hidden", role !== "3"); // show only if Volunteer
            }

            // Handle escape key
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    closeLoginModal();
                    closeRegisterModal();
                }
            });

            // Close mobile menu when clicking outside (for landing page)
            document.addEventListener('click', function(event) {
                const mobileMenuButton = event.target.closest('[\\@click="mobileMenuOpen = !mobileMenuOpen"]');
                const mobileMenu = event.target.closest('.md\\:hidden .bg-white');
                
                if (!mobileMenuButton && !mobileMenu) {
                    // This will be handled by Alpine.js automatically
                }
            });

            // Handle window resize to ensure proper mobile behavior
            window.addEventListener('resize', function() {
                if (window.innerWidth >= 1024) {
                    // Close mobile menus on desktop
                    const sidebarComponent = document.querySelector('[x-data]');
                    if (sidebarComponent && sidebarComponent.__x) {
                        sidebarComponent.__x.$data.sidebarOpen = false;
                        sidebarComponent.__x.$data.mobileMenuOpen = false;
                    }
                }
            });
        </script>
    </body>
</html>
{{end}}