{% load action_buttons %}

{% if recent_workflow %}
    {% if recent_workflow_failed %}
        <div class="alert alert-danger" role="alert">
            {{ recent_workflow.get_type_display }} {{ recent_workflow.project }} failed! Try again later.
        </div>
    {% elif recent_workflow_succeeded %}
        <div class="alert alert-success" role="alert">
            {{ recent_workflow.get_type_display }} {{ recent_workflow.project }} finished!
        </div>
    {% endif %}
{% endif %}

<div class="d-flex justify-content-between mb-3 px-4 container">
    <h6 class="text-center"><strong>Workspace Name</strong></h6>
    <a class="btn btn-primary btn-sm" href="{% url 'create_workspace' %}">
      + Workspace
    </a>
</div>

<hr>

<div id="accordion">
    {% for workspace_name, environments_project_workflow_triplets in workspace_project_environment_workflow_triplets_dict.items %}
        {% with collapse="collapse-"|add:workspace_name heading="heading-"|add:workspace_name %}
            <div class="card">
                <div class="card-header" id="{{ heading }}">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#{{ collapse }}" aria-expanded="true" aria-controls="{{ collapse }}">
                        <h6 class="mb-0">
                            {{ workspace_name }}
                        </h6>
                    </button>
                </div>

                <div id="{{ collapse }}" class="collapse show" aria-labelledby="{{ heading }}" data-parent="#accordion">
                    <div class="card-body">
                        {% if environments_project_workflow_triplets|length %}
                            <ul class="list-group list-group-flush">
                                {% for environment, project, workflows in environments_project_workflow_triplets %}
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <a href="{% url 'published_project' project.slug project.version %}" target="_blank">
                                                    {{ project }}
                                                </a>
                                            </div>
                                            <div class="col-md-3">
                                                <small>
                                                    <i>Environment type:</i> {{ environment.type.value|capfirst }}<br>
                                                    <i>Instance type:</i> {{ environment.instance_type.value }}<br>
                                                    <i>Region:</i> {{ environment.region.value }}
                                                </small>
                                            </div>
                                            <div class="col-md-2">
                                                {% if workflows.exists %}
                                                    {{ workflows.first.get_type_display }}
                                                {% else %}
                                                    {{ environment.status.value|capfirst }}
                                                {% endif %}
                                            </div>
                                            <div class="col-md-4">
                                                <div class="d-flex flex-wrap">
                                                    {% if workflows.exists %}
                                                        <div class="loader" style="margin: 18px; font-size: 5px">Loading...</div>
                                                    {% elif environment.is_running or environment.is_paused %}
                                                        {% if environment.is_running %}
                                                            <a href="{{ environment.url }}" target="_blank" class="btn btn-sm btn-success m-1">Open</a>
                                                            {% environment_modal_button environment=environment project=project button_type="modal_pause" %}
                                                        {% else %}
                                                            {% environment_modal_button environment=environment project=project button_type="modal_start" %}
                                                        {% endif %}
                                                        {% environment_modal_button environment=environment project=project button_type="modal_instance" %}
                                                        {% environment_modal_button environment=environment project=project button_type="modal_destroy" %}
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <div class="text-center">
                                You don't have any worbenches in this workspace.<br>
                                Create one in the "Projects" tab.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endwith %}
    {% endfor %}
</div>

<script>
    function refreshEnvironmentsCard(executionId) {
        fetchNewEnvironmentsCard(executionId)
        .then(html => $("#environments").html(html));
    }

    function pollExecutionStatus(executionId) {
        const pollUrl = `{% url "check_execution_status" %}?execution_resource_name=${executionId}`;
        fetch(pollUrl)
        .then(response => response.json())
        .then(({ finished }) => {
            if (finished) {
                refreshEnvironmentsCard(executionId);
            } else {
                scheduleExecutionPolling(executionId);
            }
        });
    }

    function scheduleExecutionPolling(executionId, immediate=false) {
        const timeout = immediate ? 0 : 30000;
        setTimeout(() => pollExecutionStatus(executionId), timeout);
    }

    {% for environment, project, workflows in environment_project_workflow_triplets %}
        {% for workflow in workflows %}
            scheduleExecutionPolling("{{ workflow.execution_resource_name }}", true);
        {% endfor %}
    {% endfor %}
</script>