{% extends "base.html" %}
{% import "partials/icons.html" as ic %}
{% block title %}{{ document.title }} · Scenario Editor{% endblock %}

{% block crumb %}
  <div class="ed-crumb">
    <span class="ed-crumb-sep">/</span>
    <span class="ed-crumb-name">{{ document.title }}</span>
    <span class="ed-crumb-id">{{ document.id }}</span>
  </div>
{% endblock %}

{% block actions %}
  <a href="/draft/{{ draft.id }}/yaml" target="_blank" rel="noopener"
     class="ed-btn-ghost" title="View the Scenario IR">
    {{ ic.icon('code', 14) }} IR
  </a>
  <button class="ed-btn"
          hx-post="/draft/{{ draft.id }}/validate"
          hx-target="#validation" hx-swap="innerHTML">
    {{ ic.icon('shield', 14) }} Validate
  </button>
  <button class="ed-btn"
          hx-post="/draft/{{ draft.id }}/save"
          hx-target="#status" hx-swap="innerHTML">
    {{ ic.icon('save', 14) }} Save Draft
  </button>
  <button class="ed-btn-primary" onclick="toggleExportPanel()">
    {{ ic.icon('package', 14) }} Export Wheelhouse
  </button>
{% endblock %}

{% block content %}
  {# One grid for the whole editor: the status line, the export panel, the map,
     the timeline and the inspector are all its items, so where the map sits is
     a stylesheet's answer rather than a template's. `#editor-body` and the
     workspace inside it are `display: contents` for exactly that reason -- the
     swap target stays one element, and its children still lay out beside the
     map rather than under it. #}
  <div class="ed-stage">
    <div id="status"></div>
    {% include "partials/export_panel.html" %}
    {# Outside `#editor-body`: an edit re-renders the body wholesale, and this
       panel keeps state of its own -- which search pattern is bound -- that a
       wholesale re-render would reset. It refreshes itself instead, on the
       `scenario-changed` event `editor.js` fires after every body swap. #}
    <section id="scenario-map" class="ed-panel">
      {% include "partials/scenario_map.html" %}
    </section>
    <div id="editor-body">
      {% include "partials/editor_body.html" %}
    </div>
  </div>
{% endblock %}