{% extends "base.html" %}
{% load i18n %}
{% load icons %}
{% load staticfiles %}
{% block title %}{% trans "Instances" %}{% endblock %}
{% block style %}
    <link rel="stylesheet" href="{% static "css/sortable-theme-bootstrap.css" %}" />
{% endblock %}
{% block page_header %}{% trans "Instances" %}{% endblock page_header %}

{% block page_header_extra %}
{% if request.user.is_superuser %}
    {% include 'create_inst_block.html' %}
{% endif %}
<div class="float-right search">
    <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
</div>
{% endblock page_header_extra %}

{% block content %}
    {% for compute in computes %}
        {% if compute.status is not True %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {% trans 'Problem occurred with host' %} {{ compute.name }}: {{ compute.status }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endif %}
    {% endfor %}
    <div class="col-lg-12">
        {% if app_settings.VIEW_INSTANCES_LIST_STYLE == 'grouped' and request.user.is_superuser %}
            {% include 'allinstances_index_grouped.html' %}
        {% else %}
            {% include 'allinstances_index_nongrouped.html' %}
        {% endif %}
    </div>
{% endblock content %}
{% block script %}
    <script src="{% static "js/sortable.min.js" %}"></script>
    <script src="{% static 'js/filter-table.js' %}"></script>
    {% if request.user.is_superuser %}
        <script>
            function goto_compute() {
                let compute = $("#compute_select").val();
                window.location.href = "{% url 'instances:create_instance_select_type' 1 %}".replace(1, compute);
            }
        </script>
    {% endif %}
{% endblock script %}