{% extends 'base.html' %}

{% load static %}

{% block title %} Deployments board {% endblock %}

{% block headscript %}
    <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>
{% endblock %}

{% block bodyattr %}
    onload="start('{{ url|safe }}');"
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row justify-content-md-center">
            <div class="col-lg-8 col-md-8 col-sm-6">
                {% if user.is_authenticated %}
                    <table class="table table-striped table-hover">
                        <tr>
                            <th scope="col-3">Name</th>
                            <th scope="col-3">Type</th>
                            <th scope="col-3">Status</th>
                            <th class="col-2"></th>
                            <th class="col-2"></th>
                        </tr>
                        {% for deployment in page_obj %}
                            <tr id="{{ deployment.id }}">
                                <th name="name">{{ deployment.name }}</th>
                                <th name="type">{{ deployment.type }}</th>
                                <th name="status">{{ deployment.status }}</th>
                                <th>
                                    <a href="{% url 'deployment-details' deployment.id %}">
                                        <button class="btn btn-primary">Details</button>
                                    </a>
                                </th>
                                {% if deployment.status == "FAILED" or deployment.status == "READY" %}
                                    <th name="deploy">
                                        <form action="{% url 'deployment-launch' deployment.id %}?page={{ page_obj.number }}" method="post">
                                            {% csrf_token %}
                                            <button class="btn btn-success" type="submit">Deploy</button>
                                        </form>
                                    </th>
                                {% elif deployment.status == "RUNNING" %}
                                    <th name="deploy">
                                        <button class="btn btn-primary" type="button" disabled>
                                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                            <span role="status">Deploy</span>
                                        </button>
                                    </th>
                                {% else %}
                                    <th></th>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </table>
                    {% include 'pagination.html' %}
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#create-deployment-modal">
                        Create
                    </button>                  
                {% else %}
                    <h4 style="text-align: center;">Please log in !</h4>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block modal %}
    {% include 'deployment/create_modal.html' %}
{% endblock %}

{% block script %}
    <script src="{% static 'deployment/js/event_source.js' %}" />
    </script>
{% endblock %}