{% extends 'base.html' %}

{% load static %}

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

{% block content %}
    <div class="container-fluid">
        <div class="row justify-content-md-center">
            <div class="col-lg-8 col-md-10 col-sm-12">
                {% 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-1"></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>
                                    <button class="btn btn-primary btn-sm btn btn-details" durl="{% url 'deployment-details' deployment.id %}">Details</button>
                                </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 btn-sm" type="submit">Deploy</button>
                                        </form>
                                    </th>
                                {% elif deployment.status == "RUNNING" %}
                                    <th name="deploy">
                                        <button class="btn btn-primary btn-sm" type="button" disabled>
                                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                            <span role="status">Deploying...</span>
                                        </button>
                                    </th>
                                {% elif deployment.status == "PENDING" %}
                                    <th name="deploy">
                                        <button class="btn btn-primary btn-sm" type="button" disabled>
                                            <span role="status">Pending...</span>
                                        </button>
                                    </th>
                                {% else %}
                                    <th></th>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </table>
                    {% include 'pagination.html' %}
                    <button type="button" {% if can_create %} class="btn btn-success" data-bs-toggle="modal" data-bs-target="#create-deployment-modal" {% else %} class="btn btn-danger" disabled {% endif %}>
                        Create
                    </button>
                    {% if not can_create %}
                        <p style="font-style: italic;">You can't create new deployments, contact administrator for support.</p>
                    {% endif %}
                {% else %}
                    <h4 style="text-align: center;">Please log in !</h4>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

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

{% block script %}
    <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.js' %}" />
    </script>
    <script>start('{{ url|safe }}');</script>
{% endblock %}