{% extends 'django_spire/card/title_card.html' %}

{% block card_title %}
    <i class="bi bi-magic"></i>
    {% block progress_card_title %}Processing{% endblock %}
{% endblock %}

{% block card_title_content %}
    <div
        data-redirect-delay="{% block progress_redirect_delay %}1000{% endblock %}"
        data-redirect-url="{% block progress_redirect_url %}{% endblock %}"
        data-stream-url="{% block progress_stream_url %}{% endblock %}"
        x-data="{
            has_error: false,
            message: 'Initializing...',
            overall_percent: 0,

            async init() {
                let stream = new ProgressStream(this.$el.dataset.streamUrl, {
                    on_complete: () => {},
                    on_error: (data) => {
                        this.has_error = true;
                        this.message = data.message || 'An error occurred';
                    },
                    on_update: (data) => {
                        this.overall_percent = data.overall_percent;

                        let tasks = Object.values(data.tasks);
                        let running_task = tasks.find(t => t.status === 'running');

                        if (running_task) {
                            this.message = running_task.message;
                        }
                    },
                    redirect_delay: parseInt(this.$el.dataset.redirectDelay),
                    redirect_url: this.$el.dataset.redirectUrl,
                });

                await stream.start();
            }
        }"
    >
        <div class="row g-3">
            <div class="col-12" x-show="!has_error">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="fs-6" x-text="message"></span>
                    {% include 'django_spire/badge/accent_badge.html' with x_badge_text="overall_percent + '%'" %}
                </div>
                <div class="progress" style="height: 8px;">
                    <div
                        class="progress-bar bg-app-accent"
                        role="progressbar"
                        :style="'width: ' + overall_percent + '%'"
                        :aria-valuenow="overall_percent"
                        aria-valuemin="0"
                        aria-valuemax="100"
                    ></div>
                </div>
            </div>

            <div class="col-12" x-show="!has_error">
                <p class="text-app-secondary mb-0 fs-7">
                    {% block progress_wait_message %}Processing your request. This may take a moment.{% endblock %}
                </p>
            </div>

            <div class="col-12" x-show="has_error" x-cloak>
                <div class="row g-2">
                    <div class="col-12">
                        {% include 'django_spire/element/attribute_element.html' with attribute_title='Error' %}
                        <span class="fs-6 text-app-danger" x-text="message"></span>
                    </div>
                    <div class="col-12">
                        {% block progress_error_button %}
                            {% include 'django_spire/button/primary_button.html' with button_text='Go Back' %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
