{% extends "base.html" %}

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

<section class="mission-detail-layout top-gap">
    <div class="mission-detail-main">
        <section class="panel mission-asset-overview">
            <div class="mission-asset-head">
                <div>
                    <p class="eyebrow">Asset Summary</p>
                    <h2>{{ asset.name }}</h2>
                    <p class="small-muted">{{ asset.asset_type }} · {{ asset.program }}</p>
                </div>
                <div class="mission-asset-chip-row">
                    <span class="chip strong">{{ asset.current_state }}</span>
                    <span class="chip">{{ asset.current_location }}</span>
                </div>
            </div>

            <div class="mission-meta-grid">
                <div class="mission-meta-item">
                    <dt>Current Mission</dt>
                    <dd>{{ asset.current_mission }}</dd>
                </div>
                <div class="mission-meta-item">
                    <dt>Active Window</dt>
                    <dd>{{ asset.state_window }}</dd>
                </div>
                <div class="mission-meta-item field-span-two">
                    <dt>Next Planned Event</dt>
                    <dd>{{ asset.next_event }}</dd>
                </div>
            </div>
        </section>

        <section class="panel mission-log-panel">
            <div class="panel-heading">
                <p class="eyebrow">History</p>
                <h2>Asset Timeline Entries</h2>
            </div>

            <div class="mission-log-list">
                {% for entry in entries %}
                <article class="mission-log-entry {{ entry.mode }}">
                    <div class="mission-log-rail">
                        <span class="mission-log-dot"></span>
                    </div>

                    <div class="mission-log-body">
                        <div class="mission-log-top">
                            <span class="mission-log-kicker">{% if entry.mode == 'event' %}Event Point{% else %}State Interval{% endif %}</span>
                            <span class="mission-status-pill">{{ entry.record_status }}</span>
                        </div>

                        <h3>{{ entry.title }}</h3>

                        <p class="mission-log-time">
                            {{ entry.timestamp }}
                            {% if entry.end_timestamp %}
                            → {{ entry.end_timestamp }}
                            {% endif %}
                            · {{ entry.location }}
                        </p>

                        <p class="mission-summary-text">{{ entry.summary }}</p>
                    </div>
                </article>
                {% endfor %}
            </div>
        </section>
    </div>

    <aside class="mission-detail-side">
        <section class="panel mission-current-state-panel">
            <div class="panel-heading">
                <p class="eyebrow">Current</p>
                <h2>Current Derived State</h2>
            </div>
            <div class="mission-meta-grid">
                <div class="mission-meta-item">
                    <dt>Status</dt>
                    <dd>{{ asset.current_state }}</dd>
                </div>
                <div class="mission-meta-item">
                    <dt>Location</dt>
                    <dd>{{ asset.current_location }}</dd>
                </div>
                <div class="mission-meta-item field-span-two">
                    <dt>Mission</dt>
                    <dd>{{ asset.current_mission }}</dd>
                </div>
            </div>
        </section>

        {% include "_mission_upcoming_events.html" %}

        <section class="panel mission-entry-actions-panel">
            <div class="panel-heading">
                <p class="eyebrow">Authoring</p>
                <h2>Planned Entry Actions</h2>
            </div>
            <div class="mission-action-stack">
                <button class="primary-button" type="button">Add Event Point</button>
                <button class="primary-button" type="button">Add State Interval</button>
                <button class="secondary-button" type="button">Correct Current State</button>
                <button class="secondary-button" type="button">Import From Notes</button>
            </div>
        </section>
    </aside>
</section>
{% endblock %}