{% extends 'events/base.html' %}

{% block title %}エントランス - Sovereign Events{% endblock %}

{% block content %}
<!-- Top Navigation -->
<nav class="fixed top-0 w-full z-50 shadow-sm flex justify-between items-center px-12 py-6" style="background-image: linear-gradient(rgba(12, 50, 96, 0.92), rgba(12, 50, 96, 0.92)); background-size: cover; background-position: center;">
    <div class="text-xl font-bold tracking-tighter text-white">
        Sovereign Events
    </div>
    <div class="text-white/70 font-medium">Entrance</div>
</nav>

<!-- Main Content -->
<section class="min-h-screen pt-32 bg-surface flex items-center justify-center px-12">
    <div class="w-full max-w-md">
        <!-- Welcome Card -->
        <div class="bg-white rounded-lg shadow-xl overflow-hidden border border-outline-variant/10">
            <!-- Card Header -->
            <div class="bg-gradient-to-r from-[#0C3260] to-[#0E4C92] px-8 py-12 text-center">
                <span class="inline-block bg-white/20 text-white/90 px-4 py-1 text-xs font-bold tracking-[0.2em] mb-4 rounded-full">Welcome</span>
                <h1 class="text-3xl font-black text-white mb-2">Sovereign Events</h1>
                <p class="text-white/70 text-sm">会員限定サイト</p>
            </div>

            <!-- Card Body -->
            <div class="px-8 py-12">
                <p class="text-center text-on-surface-variant leading-relaxed mb-8">
                    このサイトは会員限定です。<br>
                    事前に通知されたパスワードを入力してご進行ください。
                </p>

                <!-- Form -->
                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    
                    <div>
                        <label for="{{ form.password.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-3">
                            {{ form.password.label }}
                        </label>
                        <input 
                            type="password" 
                            name="password" 
                            id="{{ form.password.id_for_label }}"
                            class="w-full px-4 py-3 border-2 border-outline-variant/30 rounded-lg focus:outline-none focus:border-[#E1B64A] focus:ring-2 focus:ring-[#E1B64A]/20 transition-all"
                            placeholder="パスワードを入力してください"
                        >
                        {% if form.password.errors %}
                            <p class="text-red-500 text-sm mt-2 flex items-center gap-1">
                                <span class="material-symbols-outlined text-base">error</span>
                                {{ form.password.errors.0 }}
                            </p>
                        {% endif %}
                    </div>

                    <button 
                        type="submit" 
                        class="w-full bg-gradient-to-r from-[#0C3260] to-[#0E4C92] text-white px-6 py-3 rounded-lg font-bold text-lg hover:shadow-lg hover:scale-105 transition-all duration-200"
                    >
                        ログイン
                    </button>
                </form>

                <!-- Additional Info -->
                <p class="text-center text-xs text-on-surface-variant mt-6">
                    パスワードをお忘れですか？<br>
                    <span class="text-[#E1B64A] font-semibold">お問い合わせください</span>
                </p>
            </div>
        </div>

        <!-- Security Notice -->
        <div class="mt-8 px-4 py-4 bg-blue-50 border border-blue-200 rounded-lg text-center">
            <p class="text-xs text-blue-900">
                <span class="material-symbols-outlined text-base align-middle">lock</span>
                このページは暗号化されています。安全にアクセスしてください。
            </p>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="w-full py-12 bg-[#001b3d]">
    <div class="px-12 max-w-[1440px] mx-auto text-center text-white/60 font-inter text-sm">
        © 2024 Sovereign Architect. All rights reserved.
    </div>
</footer>
{% endblock %}