{% extends "allianceauth/base-bs5.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}
{% block header_nav_collapse_left %}
    {% include 'corptools/top_menu.html' %}
{% endblock %}
{% block page_title %}{% translate "Fuel Dashboard" %}{% endblock %}

{% block content %}
    {% if structures %}
        <div class="">
            <div class="d-none d-sm-none d-md-none d-lg-flex card mb-4">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div>
                            <h6 class="text-uppercase small text-muted fw-bold mb-2">Corporation Logistics</h6>
                            <h2 class="mb-2">Structure and Fuel Stats</h2>
                            <p class="small text-muted mb-0">
                                Filter structures, review block and Magmatic Gas demand, and size refuels from one view.
                            </p>
                        </div>
                        <div class="card border-success shadow-sm">
                            <div class="card-body p-3">
                                <label for="fuelDuration" class="form-label mb-2">Refuel for days</label>
                                <input
                                    type="number"
                                    class="form-control form-control-lg"
                                    id="fuelDuration"
                                    min="30"
                                    step="1"
                                    value="90"
                                >
                                <div id="fuelDurationSummary" class="text-secondary small mt-2">Minimum 30 days.</div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-row mt-2">
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Filtered Structures</div>
                                <h2 id="total_str" class="fw-bold">0</h2>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Systems</div>
                                <h2 id="total_system" class="fw-bold">0</h2>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Constellations</div>
                                <h2 id="total_const" class="fw-bold">0</h2>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Regions</div>
                                <h2 id="total_region" class="fw-bold">0</h2>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Current Blocks</div>
                                <h2 id="total_current_blocks" class="fw-bold">0</h2>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="text-uppercase small text-muted fw-bold">Current Magmatic Gas</div>
                                <h2 id="total_current_gas" class="fw-bold">0</h2>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex mt-1">
                        <div class="card m-2 flex-fill">
                            <div class="card-body d-flex flex-column h-100">
                                <div>
                                    <div class="text-uppercase small text-muted fw-bold mb-2">Fuel Demand</div>
                                    <h5 class="fw-bold">Blocks Usage</h5>
                                </div>
                                <div class="d-flex flex-fill mt-1">
                                    <div class="d-flex flex-column">
                                        <div class="card m-1 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Hour</span>
                                                <h3 id="total_block_hour" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                        <div class="card m-1 my-3 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Day</span>
                                                <h3 id="total_block_day" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                        <div class="card m-1 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Month</span>
                                                <h3 id="total_block_month" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card m-1 ms-3 flex-grow-1 bg-primary bg-opacity-10 border-primary border-opacity-50 align-items-center justify-content-center">
                                        <div class="align-items-center">
                                            <div class="text-uppercase small text-muted fw-bold mb-2">Refuel For <span id="totalDaysTitle">90d</span></div>
                                            <h3 id="total_fuel_refuel" class="fw-bold">0</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body d-flex flex-column h-100">
                                <div>
                                    <div class="text-uppercase small text-muted fw-bold mb-2">Fuel Demand</div>
                                    <h5 class="fw-bold">Magmatic Gas Usage</h5>
                                </div>
                                <div class="d-flex flex-fill mt-1">
                                    <div class="d-flex flex-column">
                                        <div class="card m-1 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Hour</span>
                                                <h3 id="total_gas_hour" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                        <div class="card m-1 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Day</span>
                                                <h3 id="total_gas_day" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                        <div class="card m-1 flex-grow-1">
                                            <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between">
                                                <span class="text-uppercase small fw-bold me-3">Per Month</span>
                                                <h3 id="total_gas_month" class="fw-bold ms-3">0</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card m-1 ms-3 flex-grow-1 bg-primary bg-opacity-10 border-primary border-opacity-50 align-items-center justify-content-center">
                                        <div class="align-items-center">
                                            <span class="text-uppercase small text-muted fw-bold mb-2">Refuel For <span id="totalGasDaysTitle">90d</span></span>
                                            <h3 id="total_gas_refuel" class="fw-bold">0</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card m-2 flex-fill">
                            <div class="card-body h-100">
                                <div class="stats-panel-header">
                                    <div>
                                        <div class="text-uppercase small text-muted fw-bold mb-2">Filtered Inventory</div>
                                        <h5 class="fw-bold">Structure Mix</h5>
                                    </div>
                                </div>
                                <table id="structure_type_breakdown" class="table table-hover mt-3"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm fuel-dashboard-card">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="table-structs" class="table align-middle mb-0 fuel-struct-table text-nowrap">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th class="all">Structure</th>
                                    <th class="text-center">Blocks Usage</th>
                                    <th class="text-center">Blocks Refuel</th>
                                    <th class="text-center">Gas Usage</th>
                                    <th class="text-center">Gas Refuel</th>
                                    <th class="text-center">Current Stock</th>
                                    <th>Time Left</th>
                                    <th class="services-column">Services</th>
                                    <th>System</th>
                                    <th>Constellation</th>
                                    <th>Region</th>
                                    <th>Corp</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for structure in structures %}
                                    <tr class="structure-row"
                                        data-block-hourly="{{ structure.fuel_req }}"
                                        data-block-day="{{ structure.fuel_req_day }}"
                                        data-block-month="{{ structure.fuel_req_30d }}"
                                        data-block-current="{{ structure.current_blocks }}"
                                        data-gas-hourly="{{ structure.gas_req }}"
                                        data-gas-day="{{ structure.gas_req_day }}"
                                        data-gas-month="{{ structure.gas_req_30d }}"
                                        data-gas-current="{{ structure.current_metenox_gas }}"
                                        data-block-refuel="{{ structure.90day }}"
                                        data-gas-refuel="{{ structure.gas_90day }}"
                                        data-system="{{ structure.structure.system_name.name }}"
                                        data-constellation="{{ structure.structure.system_name.constellation.name }}"
                                        data-region="{{ structure.structure.system_name.constellation.region.name }}"
                                        data-corp="{{ structure.structure.corporation.corporation.corporation_name }}"
                                        data-type-name="{{ structure.structure.type_name.name }}">
                                        <td></td>
                                        <td class="table-middle">
                                            <div class="d-none d-md-flex w-100 h-100 align-items-center justify-content-between">
                                                <img class="structure-icon" src="https://image.eveonline.com/Type/{{ structure.structure.type_id }}_64.png" alt="{{ structure.structure.type_name.name }}">
                                            </div>
                                        </td>
                                        <td class="table-middle">
                                            <p class="fw-bold m-0 p-0">{{ structure.structure.name }}</p>
                                            <p class="m-0 p-0">{{ structure.structure.type_name.name }}</p>
                                            <p class="text-muted small m-0 p-0">{{ structure.structure.corporation.corporation.corporation_name }} - {{ structure.structure.system_name.name }}</p>
                                        </td>
                                        <td class="table-middle">
                                            <div class="d-flex">
                                                <div class="d-flex flex-column flex-fill">
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-0 text-nowrap">Per Hour</p>
                                                            <p id="total_gas_hour" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.fuel_req|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 mb-0 text-nowrap">Per Day</p>
                                                            <p id="total_gas_day" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.fuel_req_day|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-0 text-nowrap">Per Month</p>
                                                            <p id="total_gas_month" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.fuel_req_30d|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                        </td>
                                        <td class="table-middle">
                                            <div class="d-flex">
                                                <div class="card w-100 m-1 bg-primary bg-opacity-10 border-primary border-opacity-50 align-items-center justify-content-center py-1">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                                                        <p class="text-uppercase small text-muted fw-bold mb-1 mb-0 text-nowrap">Refuel For <span class="fw-bold">90d</span></p>
                                                        <p class="fw-bold mb-0 text-nowrap blocks-till">{{ structure.90day|intcomma }}</p>
                                                    </div>
                                                </div>
                                        </td>
                                        <td class="table-middle">
                                            <div class="d-flex flex-fill">
                                                <div class="d-flex flex-column flex-fill">
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-0 text-nowrap">Per Hour</p>
                                                            <p id="total_gas_hour" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.gas_req|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-0 text-nowrap">Per Day</p>
                                                            <p id="total_gas_day" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.gas_req_day|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-0 text-nowrap">Per Month</p>
                                                            <p id="total_gas_month" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.gas_req_30d|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="table-middle">
                                            <div class="d-flex flex-fill">
                                                <div class="card w-100 m-1 bg-primary bg-opacity-10 border-primary border-opacity-50 align-items-center justify-content-center py-1">
                                                    <div class="card-body d-flex flex-column align-items-center justify-content-center">
                                                        <p class="text-uppercase small text-muted fw-bold mb-1 mb-0 text-nowrap">Refuel For <span class="fw-bold">90d</span></p>
                                                        <p class="fw-bold mb-0 text-nowrap gas-till">{{ structure.gas_90day|intcomma }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="table-middle">
                                            <div class="d-flex flex-column flex-fill">
                                                <div class="card m-1">
                                                    <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                        <p class="text-uppercase small fw-bold text-muted me-1 m-1 text-nowrap">Blocks</p>
                                                        <p id="total_gas_hour" class="fw-bold ms-3 m-0 text-nowrap">{{ structure.current_blocks|intcomma }}</p>
                                                    </div>
                                                </div>
                                                {% if structure.current_metenox_gas > 0 %}
                                                    <div class="card m-1">
                                                        <div class="card-body bg-secondary bg-opacity-10 d-flex flex-row align-items-center justify-content-between py-1">
                                                            <p class="text-uppercase small fw-bold text-muted me-1 m-1 text-nowrap">Gas</p>
                                                            <p id="total_gas_day" class="fw-bold ms-3 m-0 text-nowrap ">{{ structure.current_metenox_gas|intcomma }}</p>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td class="table-middle">
                                            {% if structure.extra_fuel_info %}
                                                <div class="fuel-expiry-section">
                                                    <div class="fuel-expiry-label">Blocks</div>
                                                    <div>{{ structure.structure.fuel_expires|date:"Y-m-d H:i" }}</div>
                                                    <div class="small text-body-secondary">
                                                        {{ structure.block_duration_left }} left
                                                    </div>
                                                </div>
                                                <div class="fuel-expiry-divider"></div>
                                                <div class="fuel-expiry-section">
                                                    <div class="fuel-expiry-label">{{ structure.extra_fuel_info.name }}</div>
                                                    <div>{{ structure.extra_fuel_info.expires|date:"Y-m-d H:i" }}</div>
                                                    <div class="small text-body-secondary">
                                                        {{ structure.gas_duration_left }} left
                                                    </div>
                                                </div>
                                            {% else %}
                                                <div class="fuel-expiry-section">
                                                    <div class="fuel-expiry-label">Blocks</div>
                                                    <div>{{ structure.structure.fuel_expires|date:"Y-m-d H:i" }}</div>
                                                    <div class="small text-body-secondary">
                                                        {{ structure.block_duration_left }} left
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td class="table-middle">
                                            <div class="services-cell">
                                                {% for service in structure.structure.structureservice_set.all %}
                                                    {% if service.state == 'online' %}
                                                        <span class="service-chip service-chip-online">{{ service.name }}</span>
                                                    {% else %}
                                                        <span class="service-chip service-chip-offline">{{ service.name }}</span>
                                                    {% endif %}
                                                {% endfor %}
                                            </div>
                                        </td>
                                        <td>{{ structure.structure.system_name.name }}</td>
                                        <td>{{ structure.structure.system_name.constellation.name }}</td>
                                        <td>{{ structure.structure.system_name.constellation.region.name }}</td>
                                        <td>{{ structure.structure.corporation.corporation.corporation_name }}</td>
                                        <td>{{ structure.structure.type_name.name }}</td>
                                    </tr>
                                {% empty %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="alert alert-warning text-center">{% translate "No Structures Available" %}</div>
    {% endif %}
{% endblock content %}
{% block extra_javascript %}
    <script src="https://cdn.datatables.net/v/bs5/dt-2.3.8/cc-1.2.1/r-3.0.8/datatables.min.js" integrity="sha384-Y6GNdV0CxRTzEGqwMvHv1oclGmXanGUi2dBa89rua1XgRzPB2IlI61fVFRk0HkYH" crossorigin="anonymous"></script>
    {% include "bundles/filterdropdown-js.html" %}
    <script>
        function numberWithCommas(x) {
            return (Number(x) || 0).toLocaleString('en-US');
        }

        $(document).ready(function() {
            const durationTitles = document.querySelectorAll('.duration-title, #totalDaysTitle, #totalGasDaysTitle');
            const fuelDurationInput = document.getElementById('fuelDuration');
            const fuelDurationSummary = document.getElementById('fuelDurationSummary');
            const tableElement = document.getElementById('table-structs');
            const tableWrapper = tableElement.closest('.table-responsive');
            const structureTypeBreakdown = document.getElementById('structure_type_breakdown');
            const defaultRefuelDays = 90;
            const minimumRefuelDays = 30;

            // Keep refuel sizing on the original day-based flow and enforce the
            // same 30-day floor when the dashboard recalculates totals.
            function getRefuelDays(value, fallbackDays) {
                const parsed = Number(value);

                if (!Number.isFinite(parsed)) {
                    return fallbackDays;
                }
                return Math.max(Math.ceil(parsed), minimumRefuelDays);
            }

            function updateDurationTitles(durationLabel) {
                durationTitles.forEach(function(elem) {
                    elem.innerText = durationLabel;
                });
            }

            function updateFuelDurationSummary(refuelDays) {
                fuelDurationSummary.innerText = 'Minimum 30 days. Current window: ' + refuelDays + 'd.';
            }

            function calculateRefuelNeed(hourly, currentStock, hours) {
                return Math.max(Math.ceil((hourly * hours) - currentStock), 0);
            }

            // Recalculate each row against the selected target so filtered totals
            // and visible row values stay in sync without another server request.
            function recalculateRowRefuel(row, hours) {
                const blockHourly = Number(row.dataset.blockHourly || 0);
                const blockCurrent = Number(row.dataset.blockCurrent || 0);
                const gasHourly = Number(row.dataset.gasHourly || 0);
                const gasCurrent = Number(row.dataset.gasCurrent || 0);
                const blockRefuel = calculateRefuelNeed(blockHourly, blockCurrent, hours);
                const gasRefuel = calculateRefuelNeed(gasHourly, gasCurrent, hours);
                const blockCell = row.querySelector('.blocks-till');
                const gasCell = row.querySelector('.gas-till');

                row.dataset.blockRefuel = blockRefuel;
                row.dataset.gasRefuel = gasRefuel;

                if (blockCell) {
                    blockCell.innerText = numberWithCommas(blockRefuel);
                }
                if (gasCell) {
                    gasCell.innerText = numberWithCommas(gasRefuel);
                }
            }

        function renderTypeBreakdown(typeCounts) {
            const entries = Object.entries(typeCounts).sort(function(a, b) {
                if (b[1] !== a[1]) {
                    return b[1] - a[1];
                }
                return a[0].localeCompare(b[0]);
            });

            if (!entries.length) {
                structureTypeBreakdown.innerHTML = '<tr class="structure-type-empty"><td colspan=2>No structures in the current filter.</td></tr>';
                return;
            }

            structureTypeBreakdown.innerHTML = entries.map(function(entry) {
                return '<tr ><td class="small py-1">' + entry[0] + '</td><td class="small py-1 text-end">' + numberWithCommas(entry[1]) + '</td></tr>';
            }).join('');
        }

        function updateDashboardStats(table) {
            const rows = table.rows({ search: 'applied' }).nodes().toArray();
            const systems = new Set();
            const constellations = new Set();
            const regions = new Set();
            const typeCounts = {};
            const totals = {
                structures: 0,
                currentBlocks: 0,
                currentGas: 0,
                blockHour: 0,
                blockDay: 0,
                blockMonth: 0,
                blockRefuel: 0,
                gasHour: 0,
                gasDay: 0,
                gasMonth: 0,
                gasRefuel: 0
            };

            rows.forEach(function(row) {
                totals.structures += 1;
                totals.currentBlocks += Number(row.dataset.blockCurrent || 0);
                totals.currentGas += Number(row.dataset.gasCurrent || 0);
                totals.blockHour += Number(row.dataset.blockHourly || 0);
                totals.blockDay += Number(row.dataset.blockDay || 0);
                totals.blockMonth += Number(row.dataset.blockMonth || 0);
                totals.blockRefuel += Number(row.dataset.blockRefuel || 0);
                totals.gasHour += Number(row.dataset.gasHourly || 0);
                totals.gasDay += Number(row.dataset.gasDay || 0);
                totals.gasMonth += Number(row.dataset.gasMonth || 0);
                totals.gasRefuel += Number(row.dataset.gasRefuel || 0);

                if (row.dataset.system) {
                systems.add(row.dataset.system);
                }
                if (row.dataset.constellation) {
                constellations.add(row.dataset.constellation);
                }
                if (row.dataset.region) {
                regions.add(row.dataset.region);
                }
                if (row.dataset.typeName) {
                typeCounts[row.dataset.typeName] = (typeCounts[row.dataset.typeName] || 0) + 1;
                }
            });

            document.getElementById('total_str').innerText = numberWithCommas(totals.structures);
            document.getElementById('total_system').innerText = numberWithCommas(systems.size);
            document.getElementById('total_const').innerText = numberWithCommas(constellations.size);
            document.getElementById('total_region').innerText = numberWithCommas(regions.size);
            document.getElementById('total_current_blocks').innerText = numberWithCommas(totals.currentBlocks);
            document.getElementById('total_current_gas').innerText = numberWithCommas(totals.currentGas);
            document.getElementById('total_block_hour').innerText = numberWithCommas(totals.blockHour);
            document.getElementById('total_block_day').innerText = numberWithCommas(totals.blockDay);
            document.getElementById('total_block_month').innerText = numberWithCommas(totals.blockMonth);
            document.getElementById('total_fuel_refuel').innerText = numberWithCommas(totals.blockRefuel);
            document.getElementById('total_gas_hour').innerText = numberWithCommas(totals.gasHour);
            document.getElementById('total_gas_day').innerText = numberWithCommas(totals.gasDay);
            document.getElementById('total_gas_month').innerText = numberWithCommas(totals.gasMonth);
            document.getElementById('total_gas_refuel').innerText = numberWithCommas(totals.gasRefuel);

            renderTypeBreakdown(typeCounts);
        }

        function updateTableDensity() {
            if (!tableWrapper) {
                return;
            }

            // If the table starts to overrun its card, squeeze the services column first.
            tableElement.classList.remove('fuel-table-tight', 'fuel-table-tightest');
            if (tableWrapper.scrollWidth > tableWrapper.clientWidth + 1) {
                tableElement.classList.add('fuel-table-tight');
            }
            if (tableWrapper.scrollWidth > tableWrapper.clientWidth + 1) {
                tableElement.classList.add('fuel-table-tightest');
            }
        }

        function refreshDashboard(table, overrideDays, syncInputValue) {
            const currentDays = getRefuelDays(fuelDurationInput.value, defaultRefuelDays);
            const refuelDays = getRefuelDays(
            typeof overrideDays === 'undefined' ? currentDays : overrideDays,
            currentDays
            );
            const durationLabel = refuelDays + 'd';

            if (syncInputValue) {
                fuelDurationInput.value = refuelDays;
            }
            updateDurationTitles(durationLabel);
            updateFuelDurationSummary(refuelDays);
            Array.from(tableElement.querySelectorAll('tbody tr')).forEach(function(row) {
                recalculateRowRefuel(row, refuelDays * 24);
            });
            updateDashboardStats(table);
            updateTableDensity();
        }

        const table = $('#table-structs').DataTable({
            filterDropDown: {
                columns: [
                    { idx: 11 },
                    { idx: 12 },
                    { idx: 13 },
                    { idx: 14 },
                    { idx: 10 }
                ],
                bootstrap: true,
                bootstrap_version: 5
            },
            columnDefs: [
                { width: '15px', targets: [ 0, ] },
                { width: '100px', targets: [ 1, ] },
                { width: '175px', targets: [ 4, 6 ] },
                { searchable: false, targets: [ 0, 1 ] },
                { orderable: false, targets: [ 0, 1, 3, 4, 5, 6, 7 ] },
                { visible: false, targets: [ 10, 11, 12, 13, 14 ] },
                { responsivePriority: 2, targets: [ 4, 6 ] },
                { responsivePriority: 1, targets: [ 0, 2, 8, ] }
            ],
            order: [[2, 'asc']],
            paging: false,
            responsive: true,
            pageLength: -1,
            drawCallback: function() {
                refreshDashboard(this.api(), undefined, false);
            }
        });

        fuelDurationInput.addEventListener('input', function(e) {
            if (e.target.value !== '') {
                refreshDashboard(table, e.target.value, false);
            }
            });
            fuelDurationInput.addEventListener('change', function(e) {
                refreshDashboard(table, e.target.value, true);
            });
            window.addEventListener('resize', function() {
                updateTableDensity();
            });
            refreshDashboard(table, undefined, true);
        });
    </script>
{% endblock extra_javascript %}
{% block extra_css %}
    <style>
        table.dataTable > tbody > tr.child ul.dtr-details {
            width: 100%;
            display: inline-block; /* Helps with width constraints */
        }

        .fuel-struct-table {
            table-layout: fixed;
            width: 100%;
        }

        .fuel-dashboard {
            display: grid;
            gap: 1.5rem;
        }

        .fuel-dashboard-card {
            border: 1px solid var(--bs-border-color);
            background: transparent;
            color: var(--bs-body-color);
        }

        .dashboard-hero {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1.5rem;
        }

        .dashboard-kicker,
        .stats-panel-kicker {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bs-secondary-color);
        }

        .dashboard-title {
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            font-weight: 700;
            color: inherit;
        }

        .dashboard-subtitle {
            max-width: 52rem;
            color: var(--bs-secondary-color);
        }

        .dashboard-control {
            width: min(100%, 19rem);
            border-radius: 1rem;
            background: rgba(var(--bs-body-color-rgb), 0.04);
            border: 1px solid var(--bs-border-color);
            color: inherit;
        }

        .dashboard-control-note {
            font-size: 0.85rem;
            color: var(--bs-secondary-color);
        }

        .stats-tile,
        .stats-panel {
            height: 100%;
            padding: 1rem 1.1rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 1rem;
            background: rgba(var(--bs-body-color-rgb), 0.04);
            color: inherit;
        }

        .stats-tile-label {
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--bs-secondary-color);
        }

        .stats-tile-value {
            margin-top: 0.45rem;
            font-size: clamp(1.5rem, 2vw, 2rem);
            font-weight: 700;
            color: inherit;
        }

        .stats-panel-title {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 700;
            color: inherit;
        }

        /* Keep the summary usage cards in a single stack with the refuel
           target beside them so the panel reads top-to-bottom. */
        .usage-metric-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.8fr);
            gap: 0.85rem;
            align-items: stretch;
        }

        .usage-metric-stack {
            display: grid;
            gap: 0.85rem;
        }

        .usage-metric-item {
            padding: 0.95rem 1rem;
            border-radius: 0.9rem;
            background: rgba(var(--bs-body-color-rgb), 0.04);
            border: 1px solid var(--bs-border-color);
            color: inherit;
        }

        .usage-metric-item-compact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .usage-metric-item-highlight {
            background: rgba(var(--bs-primary-rgb), 0.12);
            border-color: rgba(var(--bs-primary-rgb), 0.3);
        }

        .usage-metric-item-feature {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100%;
        }

        .usage-metric-label,
        .table-metric-label,
        .stock-label,
        .fuel-expiry-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--bs-secondary-color);
        }

        .usage-metric-value {
            display: block;
            margin-top: 0.25rem;
            font-size: 1.3rem;
            font-weight: 700;
            color: inherit;
        }

        .structure-type-list {
            display: grid;
            gap: 0.55rem;
            height: 233px;
            overflow-y: auto;
        }

        .structure-type-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0rem 0.9rem;
            color: inherit;
        }

        .structure-type-name {
            color: inherit;
        }

        .structure-type-count {
            font-weight: 700;
            color: inherit;
        }

        .structure-type-empty {
            padding: 1rem;
            border-radius: 0.85rem;
            background: rgba(var(--bs-body-color-rgb), 0.04);
            color: var(--bs-secondary-color);
        }

        .fuel-struct-table thead th {
            padding: 1rem 0.9rem;
            font-size: 0.77rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--bs-secondary-color);
            background: rgba(var(--bs-body-color-rgb), 0.04);
            border-bottom-width: 1px;
        }

        .fuel-struct-table tbody td {
            padding: 1rem 0.9rem;
            vertical-align: middle;
        }

        .fuel-struct-table tbody tr:hover > * {
            background-color: inherit;
        }

        /* Services is the first column we squeeze if the table gets tight. */
        .services-column {
            width: 13rem;
            min-width: 13rem;
        }

        .fuel-table-tight .services-column {
            width: 9rem;
            min-width: 9rem;
        }

        .fuel-table-tightest .services-column {
            width: 7rem;
            min-width: 7rem;
        }

        .structure-icon-cell {
            width: 72px;
        }

        .structure-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            box-shadow: var(--bs-box-shadow-sm);
        }

        .structure-name {
            font-size: 1rem;
            font-weight: 700;
            color: inherit;
        }

        .structure-meta {
            margin-top: 0.2rem;
            color: inherit;
        }

        .structure-submeta {
            margin-top: 0.15rem;
            font-size: 0.88rem;
            color: var(--bs-secondary-color);
        }

        .table-metric-layout,
        .table-metric-grid,
        .stock-grid {
            display: grid;
            gap: 0.6rem;
        }

        .table-metric-layout {
            grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.85fr);
            align-items: stretch;
        }

        .table-metric-stack {
            display: grid;
            gap: 0.6rem;
        }

        .table-metric-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .table-metric-item,
        .stock-item {
            padding: 0.7rem 0.8rem;
            border-radius: 0.8rem;
            background: rgba(var(--bs-body-color-rgb), 0.04);
            border: 1px solid var(--bs-border-color);
            text-align: left;
            color: inherit;
        }

        .table-metric-item-accent {
            background: rgba(var(--bs-primary-rgb), 0.12);
            border-color: rgba(var(--bs-primary-rgb), 0.3);
        }

        .table-metric-item-compact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .table-metric-item-feature {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .table-metric-value,
        .stock-value {
            display: block;
            margin-top: 0.2rem;
            font-weight: 700;
            color: inherit;
        }

        .services-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            max-width: 100%;
            overflow: hidden;
        }

        .service-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.3rem 0.55rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fuel-table-tight .service-chip {
            padding: 0.25rem 0.45rem;
            font-size: 0.7rem;
        }

        .fuel-table-tightest .service-chip {
            padding: 0.2rem 0.4rem;
            font-size: 0.68rem;
        }

        .service-chip-online {
            color: var(--bs-success-text-emphasis);
            background: var(--bs-success-bg-subtle);
        }

        .service-chip-offline {
            color: var(--bs-danger-text-emphasis);
            background: var(--bs-danger-bg-subtle);
        }

        .fuel-expiry-section {
            text-align: left;
        }

        .fuel-expiry-divider {
            border-top: 1px solid var(--bs-border-color);
            margin: 0.6rem 0;
        }

        @media (max-width: 991.98px) {
            .usage-metric-layout,
            .table-metric-layout,
            .table-metric-grid {
                grid-template-columns: 1fr;
            }

            .services-column {
                width: auto;
                min-width: 0;
            }
        }
    </style>
<link href="https://cdn.datatables.net/v/bs5/dt-2.3.8/cc-1.2.1/r-3.0.8/datatables.min.css" rel="stylesheet" integrity="sha384-+9NeGNgSJ4ZoXdmjEdPLcqMFs4KPcfHHAYubysfmcZV2v+V3O/AVI496iO3VTB6U" crossorigin="anonymous">

{% endblock extra_css %}