{% extends 'base.html' %}

{% load static %}

{% block title %} Deployment details: {{ deployment.name }} {% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row justify-content-md-center">
            <div class="col-lg-4 col-md-4 col-sm-6">
                {% if user.is_authenticated %}
                    <div class="form-floating mb-3">
                        <input type="text" readonly class="form-control-plaintext" id="id" value="{{ deployment.id }}">
                        <label for="id">UUID</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" readonly class="form-control-plaintext" id="type" value="{{ deployment.type }}">
                        <label for="type">Type</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" readonly class="form-control-plaintext" id="status" value="{{ deployment.status }}">
                        <label for="status">Status</label>
                    </div>
                    {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
                        <div class="form-floating mb-3">
                            <div class="progress" role="progressbar" aria-label="deployment-progress" aria-valuenow="{{ deployment.progress }}" aria-valuemin="0" aria-valuemax="100">
                                <div id="deployment-progress" class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ deployment.progress }}%"></div>
                            </div>
                        </div>
                    {% endif %}
                    <div class="form-floating mb-3">
                        <input type="text" readonly class="form-control-plaintext" id="created_at" value="{{ deployment.created_at }}">
                        <label for="created-at">Created at</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.updated_at }}">
                        <label for="updated-at">Updated at</label>
                    </div>
                    {% if deployment.status == "RUNNING" %}
                        <div class="form-floating mb-3">
                            <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.task_id }}">
                            <label for="updated-at">Task UUID</label>
                        </div>
                    {% endif %}
                    {% if deployment.status == "FAILED" %}
                        <div class="form-floating mb-3">
                            <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.error }}">
                            <label for="updated-at">Error</label>
                        </div>
                    {% endif %}
                    {% if deployment.status != "RUNNING" and deployment.status != "PENDING" %}
                        <form id="delete-deployment" action="" method="post">
                            {% csrf_token %}
                        </form>
                    {% else %}
                        <form id="abort-deployment" action="{% url 'deployment-abort' deployment.id %}" method="post">
                            {% csrf_token %}
                        </form>
                    {% endif %}
                    <button id="btn-back" durl="{% url 'deployments' %}" type="button" class="btn btn-secondary">Back</button>
                    {% if deployment.status != "RUNNING" and deployment.status != "PENDING" %}
                        <button form="delete-deployment" type="submit" class="btn btn-danger">Delete</button>
                    {% else %}
                        <button form="abort-deployment" type="submit" class="btn btn-danger">Abort</button>
                    {% endif %}
                {% else %}
                    <h4 style="text-align: center;">Please log in !</h4>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
        <script src="{% static 'django_eventstream/json2.js' %}"></script>
        <script src="{% static 'django_eventstream/eventsource.min.js' %}"></script>
        <script src="{% static 'django_eventstream/reconnecting-eventsource.js' %}"></script>
        <script src="{% static 'deployment/js/event_source_details.js' %}" /></script>
        <script>start('{{ url|safe }}');</script>
    {% endif %}
    <script>
        document.querySelector("#btn-back").addEventListener("click", function(e) {
            const durl = e.currentTarget.getAttribute("durl");
            console.log("deployment url:", durl);

            if (window.es) {
                window.es.close()
                console.log("closing sse....");
            };

            window.location = durl;
        });
    </script>
{% endblock %}