{% extends 'pootest/base.html' %}
{% load i18n %}
{% load tz %}
{% load humanize %}

{% block content %}

<style>
/* Half the previous vertical line spacing, and half the title <-> content gap. */
.pootest-structure dl.row {
    --bs-gutter-x: 0.1875rem;   /* 75% less than the previous 0.75rem title<->content gap */
    margin-bottom: 0;
}
.pootest-structure dl.row > dt,
.pootest-structure dl.row > dd {
    margin-bottom: 0.25rem;   /* half of Bootstrap's default 0.5rem vertical gap */
    line-height: 1.2;
}
.pootest-structure dl.row > dt {
    flex: 0 0 auto;
    width: 13.333%;   /* 60% narrower than the previous ~33.3% (col-md-4) title column */
}
.pootest-structure dl.row > dd {
    flex: 0 0 auto;
    width: 86.667%;
}
.pootest-structure .card-body {
    padding: 0.21rem;   /* another 30% less than the previous 0.3rem */
}
.pootest-structure.pootest-fuel-critical,
.pootest-structure.pootest-fuel-critical .card-body {
    background-color: #f8d7da;   /* light red: fuel expires within 7 days */
    color: #58151c;
}
.pootest-structure.pootest-fuel-warning,
.pootest-structure.pootest-fuel-warning .card-body {
    background-color: #fff3cd;   /* light yellow: fuel expires within 60 days */
    color: #664d03;
}
</style>

<div class="card card-default">
    <div class="card-body">
        <h5 class="card-title">{% translate "Corporation Structures" %}</h5>

        {% if error %}
            <div class="alert alert-danger" role="alert">
                <p class="mb-2">{{ error }}</p>
                {% if error_detail %}
                    <pre class="mb-2 p-2 bg-light text-dark" style="white-space: pre-wrap;">{{ error_detail }}</pre>
                {% endif %}
                {% if error_traceback %}
                    <details>
                        <summary>{% translate "Full traceback" %}</summary>
                        <pre class="mb-0 p-2 bg-light text-dark" style="white-space: pre-wrap;">{{ error_traceback }}</pre>
                    </details>
                {% endif %}
            </div>
        {% endif %}

        {% if structures %}
            <p class="text-muted mb-3">
                {{ structure_count }} structure{{ structure_count|pluralize }} found.
            </p>

            <div class="row">
            {% for s in structures %}
            <div class="col-12 col-md-6 mb-1">
                <div class="card pootest-structure h-100 {{ s.fuel_class }}">
                    <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5 col-md-4">{% translate "System:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.system }}</dd>

                        <dt class="col-sm-5 col-md-4">{% translate "Name:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.name }}</dd>

                        <dt class="col-sm-5 col-md-4">{% translate "Structure Type:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.type }}</dd>

                        <dt class="col-sm-5 col-md-4">{% translate "Fuel Level:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.fuel }}</dd>

                        <dt class="col-sm-5 col-md-4">{% translate "Fuel Required:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.fuel_required }}</dd>

                        <dt class="col-sm-5 col-md-4">{% translate "Last Update:" %}</dt>
                        <dd class="col-sm-7 col-md-8">{{ s.last_update|utc|date:"Y-m-d H:i:s" }} UTC</dd>
                    </dl>
                    </div>
                </div>
            </div>
            {% endfor %}
            </div>
        {% elif not error %}
            <p class="mb-0">{% translate "No structures found for this corporation." %}</p>
        {% endif %}

        <a href="{% url 'pootest:index' %}" class="btn btn-secondary mt-3">{% translate "Back" %}</a>
    </div>
</div>

{% endblock %}
