{% extends "page_base.html" %}


{% block main_class %}flex flex-col items-center justify-center h-full bg-[#131314]{% endblock %}

{% block content %}
    <div class="bg-[#1e1f20] p-8 rounded-2xl shadow-xl max-w-md w-full border border-gray-800">
        <!-- Title & Brand -->
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
                {{ app_name }}
            </h1>
            <p class="text-gray-400 text-sm mt-2">Welcome back</p>
        </div>

        <!-- 
          Tabs Controller
          Handled by main.js (initAuthPage) to switch visibility of forms.
        -->
        <div class="flex mb-6 bg-gray-900/50 p-1 rounded-lg">
            <button id="tab-signin"
               class="flex-1 py-2 text-center transition-all rounded-md text-sm font-medium text-blue-400 bg-gray-800 shadow-sm">
                Sign In
            </button>
            <button id="tab-signup"
               class="flex-1 py-2 text-center transition-all rounded-md text-sm font-medium text-gray-500 hover:text-gray-300">
                Sign Up
            </button>
        </div>

        <!-- 
          Sign In Form Container
        -->
        <div id="signin-container">
            <!-- 
              HTMX Sign In Form
              - hx-post: Submits to /htmx/auth/signin
              - hx-target: Updates #error-message on failure (or redirect handled by response)
              - hx-swap: Replaces outerHTML of target (used for error display)
              - hx-indicator: Shows loading state on button text/spinner
            -->
            <form id="signin-form"
                  hx-post="/htmx/auth/signin"
                  hx-target="#error-message"
                  hx-swap="outerHTML"
                  hx-indicator="#signin-btn-text"
                  class="space-y-5">
                
                <div class="space-y-1.5">
                    <label for="signin-username" class="block text-xs font-semibold text-gray-400 uppercase tracking-wide">Username</label>
                    <input type="text" id="signin-username" name="username" required
                        class="w-full bg-[#131314] border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none transition-all placeholder-gray-600 text-sm"
                        placeholder="Enter your username">
                </div>

                <div class="space-y-1.5">
                    <label for="signin-password" class="block text-xs font-semibold text-gray-400 uppercase tracking-wide">Password</label>
                    <input type="password" id="signin-password" name="password" required
                        class="w-full bg-[#131314] border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none transition-all placeholder-gray-600 text-sm"
                        placeholder="Enter your password">
                </div>

                <button type="submit" id="signin-submit-btn"
                    class="w-full bg-[#1a73e8] hover:bg-[#1967d2] text-white font-semibold py-3 rounded-lg transition-all transform active:scale-[0.98] shadow-md mt-2 flex justify-center items-center">
                    <span id="signin-btn-text">Sign In</span>
                    <!-- Loading Spinner (toggled by hx-indicator) -->
                    <svg class="htmx-indicator w-5 h-5 ml-2 text-white animate-spin hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <!-- 
          Sign Up Form Container (Hidden by default)
        -->
        <div id="signup-container" class="hidden">
            <form id="signup-form"
                  hx-post="/htmx/auth/signup"
                  hx-target="#error-message"
                  hx-swap="outerHTML"
                  hx-indicator="#signup-btn-text"
                  class="space-y-5">
                
                <div class="space-y-1.5">
                    <label for="signup-username" class="block text-xs font-semibold text-gray-400 uppercase tracking-wide">Username</label>
                    <input type="text" id="signup-username" name="username" required
                        class="w-full bg-[#131314] border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none transition-all placeholder-gray-600 text-sm"
                        placeholder="Choose a username">
                </div>

                <div class="space-y-1.5">
                    <label for="signup-password" class="block text-xs font-semibold text-gray-400 uppercase tracking-wide">Password</label>
                    <input type="password" id="signup-password" name="password" required
                        class="w-full bg-[#131314] border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none transition-all placeholder-gray-600 text-sm"
                        placeholder="Choose a password">
                </div>

                <button type="submit" id="signup-submit-btn"
                    class="w-full bg-[#1a73e8] hover:bg-[#1967d2] text-white font-semibold py-3 rounded-lg transition-all transform active:scale-[0.98] shadow-md mt-2 flex justify-center items-center">
                    <span id="signup-btn-text">Sign Up</span>
                    <!-- Loading Spinner -->
                    <svg class="htmx-indicator w-5 h-5 ml-2 text-white animate-spin hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <!-- Global Error Message Container (Target for error responses) -->
        <p id="error-message" class="hidden"></p>
    </div>

    <!-- Return to Chat Link (Outside Card) -->
    <div class="text-center mt-6">
        <a href="/" class="text-sm text-gray-500 hover:text-gray-300 transition-colors hover:underline">
            Back to Chat
        </a>
    </div>

{% endblock %}