{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% load 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="page-header">{% trans "Computes" %}</h3>
    </div>
</div>
<div class="row">
    {% if not computes %}
        <div class="col-lg-12">
            <div class="alert alert-warning shadow-sm">
                {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any computes" %}
            </div>
        </div>
    {% else %}
        <div class="col-lg-12">
            <table class="table table-striped table-hover sortable-theme-bootstrap" data-sortable>
                <thead>
                    <tr>
                        <th span="col" class="col-sm-3">{% trans "Name" %}</th>
                        <th span="col" class="col-sm-2">{% trans "Status" %}</th>
                        <th span="col" class="col-sm-5">{% trans "Details" %}</th>
                        <th span="col" class="col-sm-2 text-center">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody class="searchable">
                {% for compute in computes %}
                    <tr>
                        <td class="col-sm-3">
                            {{ compute.name }}
                        </td>
                        <td class="col-sm-2">
                            {% if compute.status is True %}{% trans "Connected" %}{% else %}{% trans "Not Connected" %}{% endif %}
                        </td>
                        <td class="col-sm-5">
                            {{ compute.details|default:"" }}
                        </td>
                        <td class="col-sm-2">
                            <div class="float-end btn-group">
                                {% if compute.status is True %}
                                    <a class="btn btn-success" title="{%trans "Overview" %}" href="{% url 'overview' compute.id %}">{% icon 'eye' %}</a>
                                {% else %}
                                    <a class="btn btn-light" title="{%trans "Overview" %}">{% icon 'eye' %}</a>
                                {% endif %}                                    
                                <a class="btn btn-primary" title="{%trans "Edit" %}" href="{% url 'compute_update' compute.id %}">{% icon 'pencil' %}</a>
                                <a class="btn btn-danger" title="{%trans "Delete" %}" href="{% url 'compute_delete' compute.id %}">{% icon 'times' %}</a>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock content %}

{% block script %}
<script src="{% static 'js/sortable.min.js' %}"></script>
<script src="{% static 'js/filter-table.js' %}"></script>
{% endblock script %}