{% extends "base.html" %}
{% from "_datetime_picker_field.html" import datetime_picker_field %}

{% block content %}
{% include "_mission_ops_tabs.html" %}
{% include "_mission_preview_header.html" %}

<section class="panel mission-control-panel top-gap">
    <form method="get" action="{{ url_for('web.mission_location_board_preview') }}" class="mission-toolbar-grid">
        <div class="mission-toolbar-block">
            <span class="field-label">面板筛选</span>
            <div class="mission-filter-grid">
                <label>
                    <span class="field-label">资产类型</span>
                    <select name="asset_type">
                        <option value="">全部类型</option>
                        {% for option in asset_type_options %}
                        <option value="{{ option }}" {% if option == asset_type_filter %}selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label>
                    <span class="field-label">地点</span>
                    <select name="location">
                        <option value="">全部地点</option>
                        {% for option in location_options %}
                        <option value="{{ option }}" {% if option == location_filter %}selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label>
                    <span class="field-label">记录范围</span>
                    <select name="record_scope">
                        {% for option in record_scope_options %}
                        <option value="{{ option.value }}" {% if option.value == record_scope %}selected{% endif %}>{{ option.label }}</option>
                        {% endfor %}
                    </select>
                </label>
                <button class="primary-button" type="submit">应用</button>
                <a class="secondary-button" href="{{ reset_url }}">重置</a>
            </div>
        </div>
    </form>

</section>

<section class="mission-board-shell top-gap">
    <div class="mission-board-main">
        {% if location_groups %}
        {% for group in location_groups %}
        <section class="panel mission-group-panel">
            <div class="mission-group-header">
                <div>
                    <p class="eyebrow">地点分组</p>
                    <h2>{{ group.title }}</h2>
                    <p class="mission-group-subtitle">{{ group.subtitle }}</p>
                </div>
                <span class="mission-group-count">{{ group['items']|length }} 项资产</span>
            </div>

            <div class="mission-card-grid">
                {% for item in group['items'] %}
                <article class="mission-asset-card mission-tone-soft">
                    <div class="mission-card-top">
                        <div>
                            <h3>{{ item.name }}</h3>
                            <p class="small-muted mission-type">{{ item.asset_type }}</p>
                        </div>
                        <span class="mission-status-pill">{{ item.state }}</span>
                    </div>

                    <div class="mission-meta-grid">
                        <div class="mission-meta-item">
                            <dt>Location</dt>
                            <dd>{{ item.location }}</dd>
                        </div>
                        <div class="mission-meta-item">
                            <dt>Mission</dt>
                            <dd>{{ item.mission }}</dd>
                        </div>
                        <div class="mission-meta-item field-span-two">
                            <dt>Next Event</dt>
                            <dd>{{ item.next_event }}</dd>
                        </div>
                    </div>

                    <div class="mission-card-foot">
                        <a class="table-link" href="{{ url_for('web.asset_list', q=item.name, sim_time=simulation_time_input) }}">查看任务资产</a>
                    </div>
                </article>
                {% endfor %}
            </div>
        </section>
        {% endfor %}
        {% else %}
        <section class="panel empty-state compact-empty">
            <h2>当前筛选条件下没有资产</h2>
        </section>
        {% endif %}
    </div>

    <div class="mission-board-side">
        {% include "_mission_upcoming_events.html" %}
    </div>
</section>
{% endblock %}