{% extends "base.html" %}

{% block content %}
<section class="catalog-header panel catalog-header-tight catalog-page-header">
    <div class="catalog-header-copy">
        <p class="eyebrow">Tank</p>
        <h1>燃料箱目录</h1>
        <p class="hero-text">支持分页、筛选、排序和快速编辑。</p>
    </div>
    <div class="catalog-header-side">
        <div class="catalog-metrics">
            <div class="summary-card compact">
                <span class="summary-label">总记录</span>
                <strong>{{ total_catalog_count }}</strong>
            </div>
            <div class="summary-card compact">
                <span class="summary-label">当前结果</span>
                <strong>{{ total_count }}</strong>
            </div>
            <div class="summary-card compact">
                <span class="summary-label">当前页</span>
                <strong>{{ page }} / {{ total_pages }}</strong>
            </div>
        </div>
    </div>
</section>

<section class="panel catalog-actions-panel top-gap">
    <div>
        <p class="eyebrow">Actions</p>
        <h2>新增内容</h2>
    </div>
    <a class="primary-button" href="{{ url_for('web.tank_new') }}">新增燃料箱</a>
</section>

<section class="panel panel-wide top-gap">
    <form class="search-form filter-row" method="get">
        <input type="search" name="q" value="{{ search_term }}" placeholder="Tank / Vehicle / Fuel / Source">

        <select name="fuel_type">
            <option value="">全部燃料</option>
            {% for option in fuel_options %}
            <option value="{{ option }}" {% if option == fuel_filter %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
        </select>

        <select name="source">
            <option value="">全部来源</option>
            {% for option in source_options %}
            <option value="{{ option }}" {% if option == source_filter %}selected{% endif %}>{{ option }}</option>
            {% endfor %}
        </select>

        <select name="sort">
            {% for option in sort_options %}
            <option value="{{ option.value }}" {% if option.value == sort_option %}selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
        </select>

        <button class="primary-button" type="submit">应用</button>
        <a class="secondary-button" href="{{ url_for('web.tank_list') }}">重置</a>
    </form>

    {% if rows %}
    <div class="table-shell top-gap">
        <table class="data-table compact-table">
            <thead>
                <tr>
                    <th>Tank</th>
                    <th>Fuel</th>
                    <th>Vehicle</th>
                    <th>Volume (L)</th>
                    <th>Dry (t)</th>
                    <th>Fuel (t)</th>
                    <th>Wet (t)</th>
                    <th>Ratio</th>
                    <th>Source</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr>
                    <td><strong>{{ row.tank_name }}</strong></td>
                    <td>{{ row.fuel_type or '-' }}</td>
                    <td>{{ row.vehicle_name or '-' }}</td>
                    <td>{{ row.tank_volume_l if row.tank_volume_l is not none else '-' }}</td>
                    <td>{{ row.dry_mass_t if row.dry_mass_t is not none else '-' }}</td>
                    <td>{{ row.fuel_mass_t if row.fuel_mass_t is not none else '-' }}</td>
                    <td>{{ row.wet_mass_t if row.wet_mass_t is not none else '-' }}</td>
                    <td>{{ row.mass_ratio if row.mass_ratio is not none else '-' }}</td>
                    <td>{{ row.source or '-' }}</td>
                    <td>
                        <div class="table-actions">
                            <a class="table-link" href="{{ url_for('web.tank_edit', tank_id=row.id) }}">编辑</a>
                            <form
                                method="post"
                                action="{{ url_for('web.tank_delete', tank_id=row.id) }}"
                                class="inline-form"
                                onsubmit="return confirm('确认删除 {{ row.tank_name }} ?')"
                            >
                                <button class="danger-link" type="submit">删除</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if total_pages > 1 %}
    <nav class="pagination-bar" aria-label="Tank pagination">
        {% if has_prev %}
        <a class="pagination-link" href="{{ prev_url }}">上一页</a>
        {% else %}
        <span class="pagination-link disabled">上一页</span>
        {% endif %}

        <div class="pagination-pages">
            {% for item in page_links %}
                {% if item.ellipsis %}
                <span class="pagination-ellipsis">...</span>
                {% elif item.current %}
                <span class="pagination-link current">{{ item.number }}</span>
                {% else %}
                <a class="pagination-link" href="{{ item.url }}">{{ item.number }}</a>
                {% endif %}
            {% endfor %}
        </div>

        {% if has_next %}
        <a class="pagination-link" href="{{ next_url }}">下一页</a>
        {% else %}
        <span class="pagination-link disabled">下一页</span>
        {% endif %}
    </nav>
    {% endif %}
    {% else %}
    <section class="empty-state compact-empty">
        <h2>没有命中结果</h2>
        <p>调整筛选条件或重置后重试。</p>
    </section>
    {% endif %}
</section>
{% endblock %}