{% extends "base.html" %}

{% block title %}Bootstrap - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-rocket"></i> Bootstrap Initial Setup
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info" role="alert">
                    <i class="fas fa-info-circle"></i>
                    <strong>First Time Setup:</strong> This will create the initial team, admin user, and API key for your SEREACT system.
                    This should only be used once during initial setup.
                </div>

                <form method="POST">
                    <div class="mb-3">
                        <label for="team_name" class="form-label">
                            <i class="fas fa-users"></i> Team Name
                        </label>
                        <input type="text" class="form-control" id="team_name" name="team_name" 
                               placeholder="My Organization" required>
                        <div class="form-text">
                            The name of your initial team/organization
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="admin_name" class="form-label">
                            <i class="fas fa-user"></i> Admin Name
                        </label>
                        <input type="text" class="form-control" id="admin_name" name="admin_name" 
                               placeholder="John Doe" required>
                        <div class="form-text">
                            Full name of the administrator user
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="admin_email" class="form-label">
                            <i class="fas fa-envelope"></i> Admin Email
                        </label>
                        <input type="email" class="form-control" id="admin_email" name="admin_email" 
                               placeholder="admin@example.com" required>
                        <div class="form-text">
                            Email address for the administrator user
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="api_key_name" class="form-label">
                            <i class="fas fa-key"></i> API Key Name
                        </label>
                        <input type="text" class="form-control" id="api_key_name" name="api_key_name" 
                               value="Initial API Key" placeholder="Initial API Key">
                        <div class="form-text">
                            A descriptive name for the initial API key
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-rocket"></i> Bootstrap System
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-exclamation-triangle"></i> Important Notes
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-shield-alt text-danger"></i> Security</h6>
                        <ul class="small">
                            <li>This endpoint should be disabled in production after initial setup</li>
                            <li>The generated API key will be displayed only once</li>
                            <li>Make sure to save the API key securely</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-cog text-info"></i> What This Creates</h6>
                        <ul class="small">
                            <li>Initial team with the specified name</li>
                            <li>Admin user with full privileges</li>
                            <li>API key for accessing the system</li>
                            <li>Automatic configuration of this client</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-question-circle"></i> Prerequisites
                </h6>
            </div>
            <div class="card-body">
                <p class="small mb-2">Before running bootstrap, ensure:</p>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="small">
                            <li><i class="fas fa-check text-success"></i> SEREACT API server is running</li>
                            <li><i class="fas fa-check text-success"></i> Database (Firestore) is configured</li>
                            <li><i class="fas fa-check text-success"></i> No existing teams in the system</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="small">
                            <li><i class="fas fa-check text-success"></i> API base URL is configured correctly</li>
                            <li><i class="fas fa-check text-success"></i> Network connectivity to API server</li>
                            <li><i class="fas fa-check text-success"></i> All required services are available</li>
                        </ul>
                    </div>
                </div>
                <div class="mt-2">
                    <a href="{{ url_for('config') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-cog"></i> Check Configuration
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}