{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% load bootstrap_icons %}
{% block title %}{% trans "Computes" %}{% endblock %}
{% block content %}
<div class="row">
    <div class="col-lg-12">
        {% include 'create_comp_block.html' %}
        {% include 'search_block.html' %}
        <h3 class="mb-3">{% trans "Computes" %}</h3>
    </div>
</div>
<div class="row">
    {% if not computes %}
        <div class="col-lg-12">
            <div class="alert alert-warning shadow-sm">
                {% bs_icon 'exclamation-triangle'%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
            </div>
        </div>
    {% else %}
        <div class="col-lg-12">
            {# position-relative: the hidden status texts are positioned within it, not the page #}
            <div class="table-responsive position-relative">
                <table class="table align-middle" data-sortable>
                    <thead>
                        <tr>
                            <th scope="col">{% trans "Host" %}</th>
                            <th scope="col" data-sort-method="number">{% trans "vCPUs" %}</th>
                            <th scope="col" data-sort-method="number">{% trans "Memory" %}</th>
                            <th scope="col" data-sort-method="none">{% trans "Storage" %}</th>
                            <th scope="col" data-sort-method="none"><span class="visually-hidden">{% trans "Actions" %}</span></th>
                        </tr>
                    </thead>
                    <tbody class="searchable">
                    {% for compute in computes %}
                        {% with given=compute.shown_capacity %}
                        <tr>
                            <td class="py-3">
                                <div class="d-flex align-items-baseline gap-2">
                                    {% if compute.status is True %}
                                        <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-success" title="{% trans "Connected" %}" aria-hidden="true"></span>
                                        <span class="visually-hidden">{% trans "Connected" %}</span>
                                    {% else %}
                                        <span class="d-inline-block rounded-circle p-1 flex-shrink-0 bg-danger" title="{% trans "Not Connected" %}" aria-hidden="true"></span>
                                        <span class="visually-hidden">{% trans "Not Connected" %}</span>
                                    {% endif %}
                                    <span class="fw-semibold">{{ compute.name }}</span>
                                </div>
                                <div class="small text-body-secondary ms-3">{{ compute.hostname }}{% if compute.details %}<br>{{ compute.details }}{% endif %}</div>
                                {% if compute.status is not True %}
                                    <div class="small text-danger ms-3">{{ compute.connection_error }}</div>
                                {% endif %}
                            </td>
                            {% if given %}
                            <td class="py-3" data-sort="{{ given.ratio|stringformat:".2f" }}">
                                {% include "computes/capacity_vcpus.html" %}
                            </td>
                            <td class="py-3" data-sort="{{ given.memory_percent }}">
                                {% include "computes/capacity_memory.html" %}
                            </td>
                            <td class="py-3">
                                {% include "computes/capacity_storage.html" %}
                            </td>
                            {% else %}
                            <td colspan="3" class="py-3 small text-body-secondary">{% if compute.status is True %}{% trans "The capacity could not be read." %}{% else %}{% trans "No capacity while the host cannot be reached." %}{% endif %}</td>
                            {% endif %}
                            <td class="py-3 text-end">
                                <div class="btn-group">
                                    {# a host the panel cannot reach opens too: its page says why #}
                                    <a class="btn {% if compute.status is True %}btn-success{% else %}btn-light{% endif %}" title="{% trans "Overview" %}" href="{% url 'overview' compute.id %}">{% bs_icon 'eye-fill' %}</a>
                                    <a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'compute_update' compute.id %}">{% bs_icon 'pencil-fill' %}</a>
                                    <a class="btn btn-danger" title="{%trans "Delete" %}" href="{% url 'compute_delete' compute.id %}">{% bs_icon 'x-circle-fill' %}</a>
                                </div>
                            </td>
                        </tr>
                        {% endwith %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
</div>
{% endblock content %}

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