{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load bootstrap_icons %}

{% block title %}{% trans "Removed VMs" %}{% endblock %}

{% block page_heading %}{% trans "Removed VMs" %}{% endblock page_heading %}

{% block content %}
<p class="text-body-secondary">{% trans "VMs that vanished from their compute. Their owners come back if the same UUID shows up again before the record expires." %}</p>
{% if not tombstones %}
    <div class="alert alert-info shadow-sm">
        {% bs_icon 'info-circle' %} {% trans "No removed VMs" %}
    </div>
{% else %}
    <div class="card mb-3">
        <div class="card-header d-flex flex-wrap align-items-center gap-2">
            <span class="me-auto">{% trans "Removed VMs" %} <span class="badge text-bg-light border">{{ tombstones|length }}</span></span>
            <input id="filter" class="form-control form-control-sm w-auto" type="search" placeholder="{% trans "Search" %}" aria-label="{% trans "Search removed VMs" %}">
        </div>
        <div class="list-group list-group-flush searchable">
        {% for tombstone in tombstones %}
            <div class="list-group-item py-3" data-search="{{ tombstone.name }} {{ tombstone.uuid }} {{ tombstone.host }} {{ tombstone.owner_names|join:' ' }}">
                <div class="row g-2 align-items-center">
                    <div class="col-12 col-md-4">
                        <span class="fw-semibold text-break">{{ tombstone.name }}</span>
                        {% if tombstone.is_template %}<span class="badge text-bg-light border">{% trans "Template" %}</span>{% endif %}
                        <div class="font-monospace small text-body-secondary text-break mt-1">{{ tombstone.uuid }}</div>
                    </div>
                    <div class="col-12 col-md-5 small">
                        <div>
                            {% trans "Left" %} <span class="fw-semibold">{{ tombstone.host }}</span>
                            <span class="text-body-secondary">· {% trans "Owners" %}:</span> {{ tombstone.owner_names|join:", "|default:"–" }}
                        </div>
                        <div class="text-body-secondary mt-1">
                            {% trans "Removed" %} <span class="text-nowrap">{{ tombstone.removed|date:"Y-m-d H:i" }}</span>
                            · {% trans "expires" %} <span class="text-nowrap">{{ tombstone.expires|date:"Y-m-d H:i" }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 text-md-end">
                        <a class="btn btn-sm btn-outline-danger" href="{% url 'admin:tombstone_delete' tombstone.id %}">{% trans "Delete" %}</a>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
        <div role="status">
            <div id="no-match" class="text-center text-body-secondary py-3" hidden>{% trans "No removed VM matches the search." %}</div>
        </div>
    </div>
{% endif %}
{% endblock content %}

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