{% extends "base.html" %}
{% block title %}{% if editing %}Edit {{ mirror.name }}{% else %}{{ mirror.name if mirror else "New plane mirror" }}{% endif %}{% endblock %}
{% block body %}
<section class="section-head">
  <div>
    <h1>{% if editing %}Edit {{ mirror.name }}{% else %}{{ mirror.name if mirror else "New plane mirror" }}{% endif %}</h1>
    {% if mirror and mirror.label %}<p><strong>{{ mirror.label }}</strong></p>{% endif %}
    <p>{% if editing %}Update the name, label, or saved layer stack.{% else %}Define a mirror and its layer stack. You can configure scans after saving.{% endif %}</p>
  </div>
  <div class="actions">
    <a class="button" href="{{ url_for('plane_mirror_index') }}">All plane mirrors</a>
    {% if editing %}
      <a class="button primary" href="{{ url_for('plane_mirror_detail', mirror_id=mirror.id) }}">Back to mirror</a>
    {% elif mirror %}
      <a class="button" href="{{ url_for('plane_mirror_runs') }}">Manage runs</a>
    {% endif %}
  </div>
</section>

{% if message %}
  <section class="notice"><p>{{ message }}</p></section>
{% endif %}

<div class="plane-mirror-editor-layout">
<form
  class="form plane-mirror-form"
  method="post"
  action="{{ url_for('plane_mirror_update', mirror_id=mirror.id) if mirror else url_for('plane_mirror_create') }}"
  data-plane-mirror-form
  data-stack-preview-url="{{ url_for('plane_mirror_stack_preview') }}"
>
  <fieldset class="plane-mirror-save" data-save-controls>
    <legend>{% if mirror %}Saved plane mirror{% else %}Save{% endif %}</legend>
    <label>Mirror name <input name="mirror_name" value="{{ mirror.name if mirror else '' }}" placeholder="e.g. Pt mirror on Si" maxlength="120"></label>
    <label>Mirror label / note <input name="mirror_label" value="{{ mirror.label if mirror and mirror.label else '' }}" placeholder="Optional" maxlength="300"></label>
    <div class="actions">
      {% if mirror %}
        <button class="button primary" type="submit">Save mirror changes</button>
      {% else %}
        <button class="button primary" type="submit">Create mirror</button>
      {% endif %}
    </div>
  </fieldset>

  <datalist id="material-suggestions">
    {% for material in materials %}
      <option value="{{ material }}" data-density="{{ material_density_map.get(material, '') }}">{{ material }}</option>
    {% endfor %}
  </datalist>

  {% include "_stack_fields.html" %}
</form>

<section class="preview-panel plane-mirror-schematic">
  <div class="section-head preview-head">
    <div>
      <h2>Layer stack preview</h2>
      <p data-plane-mirror-stack-status>Updating from the saved mirror definition.</p>
    </div>
  </div>
  <img class="preview is-hidden" src="" alt="Layer stack schematic" data-plane-mirror-stack-image>
</section>
</div>

  {% if mirror and editing %}
<form class="form" method="post" action="{{ url_for('plane_mirror_delete', mirror_id=mirror.id) }}">
  <div class="actions">
    <button class="button danger" type="submit" data-confirm="Delete this plane mirror and all its scans? This cannot be undone.">Delete this plane mirror</button>
  </div>
</form>
{% endif %}
{% endblock %}