{% extends "base.html" %}

{% block title %}DosVault - Setup{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-md w-full space-y-8 text-center">
        <div>
            <div class="mx-auto w-24 h-24 mb-6">
                <svg class="w-full h-full text-accent" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
            </div>
            
            <h2 class="text-3xl font-bold text-primary mb-2">DosVault Setup</h2>
            
            {% if status == "initializing" %}
                <div class="animate-spin inline-block w-8 h-8 border-4 border-accent border-t-transparent rounded-full mb-4"></div>
                <p class="text-secondary text-lg">{{ message }}</p>
                <p class="text-secondary text-sm mt-2">This may take a few moments...</p>
                
                <!-- Auto refresh every 3 seconds while initializing -->
                <script>
                    setTimeout(function() {
                        window.location.reload();
                    }, 3000);
                </script>
                
            {% elif status == "error" %}
                <div class="w-16 h-16 mx-auto mb-4 text-red-500">
                    <svg fill="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                    </svg>
                </div>
                <p class="text-red-400 text-lg mb-4">{{ message }}</p>
                
                {% if setup_commands %}
                <div class="bg-secondary p-6 rounded-lg border border-tertiary text-left">
                    <h3 class="text-primary text-lg font-semibold mb-4">Manual Setup Instructions</h3>
                    <p class="text-secondary text-sm mb-4">
                        Please run the following commands in your terminal to set up DosVault:
                    </p>
                    
                    <div class="space-y-3">
                        {% for command in setup_commands %}
                        <div class="bg-primary p-3 rounded border border-border-color">
                            <code class="text-accent text-sm font-mono">{{ command }}</code>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <div class="mt-6 p-4 bg-yellow-900 border border-yellow-700 rounded">
                        <p class="text-yellow-200 text-sm">
                            <strong>Note:</strong> After running these commands, refresh this page to continue.
                        </p>
                    </div>
                </div>
                
                <div class="mt-6">
                    <button onclick="window.location.reload()" 
                            class="px-6 py-3 bg-accent hover:bg-accent-hover text-white rounded-lg font-medium transition-colors">
                        Retry Setup
                    </button>
                </div>
                {% endif %}
                
            {% else %}
                <div class="w-16 h-16 mx-auto mb-4 text-green-500">
                    <svg fill="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <p class="text-green-400 text-lg mb-4">Setup Complete!</p>
                <p class="text-secondary text-sm">DosVault has been initialized successfully.</p>
                
                <div class="mt-6">
                    <a href="/" class="px-6 py-3 bg-accent hover:bg-accent-hover text-white rounded-lg font-medium transition-colors inline-block">
                        Continue to DosVault
                    </a>
                </div>
            {% endif %}
        </div>
        
        <!-- Default credentials notice for successful setup -->
        {% if status == "initializing" or status == "error" %}
        <div class="mt-8 p-4 bg-blue-900 border border-blue-700 rounded-lg">
            <h4 class="text-blue-200 font-semibold mb-2">Default Admin Credentials</h4>
            <p class="text-blue-300 text-sm">
                Username: <code class="bg-blue-800 px-1 py-0.5 rounded">admin</code><br>
                Password: <code class="bg-blue-800 px-1 py-0.5 rounded">admin123</code>
            </p>
            <p class="text-blue-400 text-xs mt-2">
                <strong>Important:</strong> Please change these credentials after your first login!
            </p>
        </div>
        {% endif %}
    </div>
</div>

<style>
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
{% endblock %}