{% extends "layout.html" %}
{% block title %}{{ super() }} - Setup{% endblock %}
{% block content %}
<div class="auth-container">
    <div class="auth-card fade-in" style="max-width: 500px;">
        <div class="auth-header">
            <div class="auth-logo">runit</div>
            <div class="auth-title">Initial Setup</div>
        </div>
        <div class="auth-body">
            <form action="{{ url_for('initsetup') }}" method="post" id="setupForm">
                {% for (category, message) in get_flashed_messages(request) %}
                <div class="alert alert-{{ category }} mb-3">
                    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
                    <span>{{ message }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
                </div>
                {% endfor %}
                
                <div id="setupWizard">
                    <div class="setup-step">
                        <h6 class="text-mono text-accent mb-3">
                            <i class="fas fa-database fa-fw me-2"></i>
                            Database Setup
                        </h6>
                        <div class="form-group">
                            <label class="form-label">DBMS</label>
                            <select name="DBMS" class="form-select" required onchange="selectDMEngine(this.value)">
                                <option value="sqlite" selected>SQLite</option>
                                <option value="mongodb">MongoDB</option>
                                <option value="postgresql">PostgreSQL</option>
                                <option value="mysql" disabled>MySQL</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Host</label>
                            <input type="text" value="127.0.0.1" class="form-control" name="DATABASE_HOST" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Port</label>
                            <input type="text" class="form-control" name="DATABASE_PORT">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Database Name</label>
                            <input type="text" name="DATABASE_NAME" value="runit" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Database User</label>
                            <input type="text" class="form-control" name="DATABASE_USERNAME">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Database Password</label>
                            <input type="password" class="form-control" name="DATABASE_PASSWORD">
                        </div>
                    </div>
                    
                    <div class="setup-step" style="display: none;">
                        <h6 class="text-mono text-accent mb-3">
                            <i class="fas fa-cog fa-fw me-2"></i>
                            Runtime Setup
                        </h6>
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fab fa-python fa-fw me-1"></i>
                                Python Runtime
                            </label>
                            <input type="text" class="form-control" value="python" name="RUNTIME_PYTHON" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fab fa-php fa-fw me-1"></i>
                                PHP Runtime
                            </label>
                            <input type="text" class="form-control" value="php" name="RUNTIME_PHP" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">
                                <i class="fab fa-js fa-fw me-1"></i>
                                JavaScript Runtime
                            </label>
                            <input type="text" class="form-control" value="node" name="RUNTIME_JAVASCRIPT" required>
                        </div>
                    </div>
                    
                    <div class="setup-step" style="display: none;">
                        <h6 class="text-mono text-accent mb-3">
                            <i class="fas fa-user-shield fa-fw me-2"></i>
                            Administrator Setup
                        </h6>
                        <div class="form-group">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" name="adminemail" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-control" value="admin" name="adminusername" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-control" name="adminpassword" required>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="auth-footer d-flex justify-content-between">
            <button type="button" class="btn btn-ghost" id="setupBackButton" style="visibility: hidden;">
                <i class="fas fa-arrow-left fa-fw me-1"></i>
                Back
            </button>
            <button type="button" class="btn btn-accent" id="setupNextButton">
                Next
                <i class="fas fa-arrow-right fa-fw ms-1"></i>
            </button>
            <button type="button" class="btn btn-accent d-none" id="setupSubmitButton">
                <i class="fas fa-check fa-fw me-1"></i>
                Complete Setup
            </button>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="/static/js/setup.js"></script>
{% endblock %}