{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}Launching Instance - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/launch_progress.css') }}">
{% endblock %}

{% block content %}
{{ header(
    title=is_update and "Updating Instance" or "Launching Instance",
    description=is_update and "Updating your DocuPulse instance with the latest version" or "Setting up your new DocuPulse instance",
    icon="fa-arrow-up" if is_update else "fa-rocket"
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <h4 id="currentStep">Initializing...</h4>
                        <p class="text-muted" id="stepDescription">Preparing to launch your instance</p>
                    </div>

                    <div class="progress mb-4" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" 
                             id="launchProgress" 
                             style="width: 0%">0%</div>
                    </div>

                    <div id="stepsContainer" class="launch-steps-container">
                        <!-- Steps will be added here by JavaScript -->
                    </div>

                    <div class="text-center mt-4">
                        <div id="errorContainer" class="alert alert-danger" style="display: none;">
                            <h5><i class="fas fa-exclamation-triangle"></i> Error</h5>
                            <p id="errorMessage"></p>
                            <button class="btn btn-outline-danger" onclick="retryLaunch()">
                                <i class="fas fa-redo"></i> Retry
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Pass settings from Flask to JavaScript
    window.nginxSettings = {
        url: '{{ nginx_settings.url if nginx_settings else "" }}',
        username: '{{ nginx_settings.username if nginx_settings else "" }}',
        password: '{{ nginx_settings.password if nginx_settings else "" }}',
        email: '{{ nginx_settings.email if nginx_settings else "" }}'
    };
    
    window.portainerSettings = {
        url: '{{ portainer_settings.url if portainer_settings else "" }}',
        api_key: '{{ portainer_settings.api_key if portainer_settings else "" }}'
    };

    window.cloudflareSettings = {
        email: '{{ cloudflare_settings.email if cloudflare_settings else "" }}',
        api_key: '{{ cloudflare_settings.api_key if cloudflare_settings else "" }}',
        zone_id: '{{ cloudflare_settings.zone_id if cloudflare_settings else "" }}',
        server_ip: '{{ cloudflare_settings.server_ip if cloudflare_settings else "" }}'
    };

    // Pass CSRF token to JavaScript
    window.csrfToken = '{{ csrf_token }}';
    
    // Pass update parameters if this is an update operation
    window.isUpdate = {{ 'true' if is_update else 'false' }};
    window.updateInstanceId = '{{ instance_id or "" }}';
    window.updateRepoId = '{{ repo_id or "" }}';
    window.updateBranch = '{{ branch or "" }}';
</script>
<script src="{{ url_for('static', filename='js/launch_progress.js') }}"></script>
{% endblock %}