{% 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;
    display: flex;        /* force a left-to-right row (titles left, values right) */
    flex-wrap: wrap;
}
.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;
    float: none;          /* never let the theme float a title to the right */
    text-align: left;
}
.pootest-structure dl.row > dt {
    order: 0;             /* title first  -> left-hand side */
    flex: 0 0 auto;
    width: 13.333%;   /* 60% narrower than the previous ~33.3% (col-md-4) title column */
}
.pootest-structure dl.row > dd {
    order: 1;             /* value second -> right-hand side */
    flex: 0 0 auto;
    width: 60.667%;   /* 30% narrower than the previous 86.667% content column */
}
.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;
}
.pootest-structure.pootest-fuel-ok,
.pootest-structure.pootest-fuel-ok .card-body {
    background-color: #d1e7dd;   /* light green: more than 60 days of fuel */
    color: #0a3622;
}
</style>

<ul class="nav nav-tabs mb-3" id="pootest-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="structure-list-tab" data-bs-toggle="tab"
                data-bs-target="#structure-list" type="button" role="tab"
                aria-controls="structure-list" aria-selected="true">
            {% translate "Structure List" %}
        </button>
    </li>
</ul>

<div class="tab-content" id="pootest-tab-content">
    <div class="tab-pane fade show active" id="structure-list" role="tabpanel"
         aria-labelledby="structure-list-tab" tabindex="0">

<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>

    </div><!-- /tab-pane: structure-list -->
</div><!-- /tab-content -->

{% endblock %}