{% extends "base.html" %}

{% block content %}
<section class="catalog-header panel catalog-header-tight catalog-page-header">
    <div class="catalog-header-copy">
        <p class="eyebrow">Vehicle</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.vehicle_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="Vehicle / Source">

        <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.vehicle_list') }}">重置</a>
    </form>

    {% if rows %}
    <div class="table-shell top-gap">
        <table class="data-table compact-table">
            <thead>
                <tr>
                    <th>Vehicle</th>
                    <th>Launch Price</th>
                    <th>Source</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr>
                    <td><strong>{{ row.vehicle_name }}</strong></td>
                    <td>{{ row.launch_price if row.launch_price is not none else '-' }}</td>
                    <td>{{ row.source or '-' }}</td>
                    <td>
                        <div class="table-actions">
                            <a class="table-link" href="{{ url_for('web.vehicle_edit', vehicle_id=row.id) }}">编辑</a>
                            <form
                                method="post"
                                action="{{ url_for('web.vehicle_delete', vehicle_id=row.id) }}"
                                class="inline-form"
                                onsubmit="return confirm('确认删除 {{ row.vehicle_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="Vehicle 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 %}