{% extends "base.html" %}
{% block title %}Plots{% endblock %}
{% block body %}
<section class="section-head">
  <div>
    <h1>{{ 'Edit saved plot' if editing_plot else 'Compare saved runs' }}</h1>
    <p>Combine saved grating and plane-mirror runs. Grating runs can be filtered by diffraction order; mirror runs plot reflectivity directly.</p>
  </div>
</section>

<section class="notice">
  <p>
    Saved runs are read from <code>{{ results_dir }}/</code>. Add the runs you want,
    and the preview updates immediately.
  </p>
</section>

<form
  class="form plot-workspace-layout"
  method="post"
  action="{{ url_for('update_plot', plot_id=editing_plot.id) if editing_plot else url_for('create_plot') }}"
  data-plot-workspace
  data-order-field-prefix="orders_"
  data-preview-url="{{ url_for('preview_plot') }}"
>
  <section class="preview-panel plot-stage-panel">
    <div class="section-head preview-head">
      <div>
        <h2>Plot preview</h2>
        <p data-plot-preview-status role="status" aria-live="polite">Select saved runs to see the interactive comparison plot.</p>
      </div>
      <div class="actions">
        <span class="preview-pill" data-plot-preview-loading>Idle</span>
        <button class="button primary" type="submit" data-save-plot disabled>{{ 'Save changes' if editing_plot else 'Save plot' }}</button>
      </div>
    </div>
    <div class="plotly-stage" data-plot-preview></div>
    <div class="list compact" data-selected-run-summary></div>
  </section>

  <section class="plot-controls-panel">
    <fieldset>
      <legend>Plot selection</legend>
      <label>
        Plot title
        <input name="title" type="text" value="{{ editing_plot.title if editing_plot else 'Combined plot' }}">
      </label>
      <label>
        Save as name
        <input name="plot_name" type="text" maxlength="160" value="{{ editing_plot.name if editing_plot else '' }}" placeholder="Uses the plot title if left blank">
      </label>
      <div class="form-grid two-column">
        <label>
          X values
          <select name="x_axis_value">
            <option value="energy" {% if not editing_plot or editing_plot.plot_config.x_axis_value == 'energy' %}selected{% endif %}>Energy (eV)</option>
            <option value="energy_times_order" {% if editing_plot and editing_plot.plot_config.x_axis_value == 'energy_times_order' %}selected{% endif %}>Energy × plotted diffraction order (eV)</option>
          </select>
        </label>
        <label>
          X axis
          <select name="x_axis_type">
            <option value="linear" {% if not editing_plot or editing_plot.plot_config.x_axis_type == 'linear' %}selected{% endif %}>Linear</option>
            <option value="log" {% if editing_plot and editing_plot.plot_config.x_axis_type == 'log' %}selected{% endif %}>Logarithmic</option>
          </select>
        </label>
        <label>
          Y axis
          <select name="y_axis_type">
            <option value="linear" {% if not editing_plot or editing_plot.plot_config.y_axis_type == 'linear' %}selected{% endif %}>Linear</option>
            <option value="log" {% if editing_plot and editing_plot.plot_config.y_axis_type == 'log' %}selected{% endif %}>Logarithmic</option>
          </select>
        </label>
      </div>

      {% if run_options %}
        <label>
          Add saved run
          <select data-run-picker>
            <option value="">Choose a run</option>
            {% for run in run_options %}
              <option
                value="{{ run.id }}"
                data-run-name="{{ run.selector_text }}"
                data-run-orders="{{ run.available_orders | join(',') }}"
                data-run-scans="{{ run.plot_scans | tojson | forceescape }}"
                data-run-loops="{{ run.plot_loops | tojson | forceescape }}"
                data-run-kind="{{ 'mirror' if run.mirror_id else 'grating' }}"
                data-run-default-order="{{ run.run_input.diffraction_order if run.run_input is mapping and run.run_input.diffraction_order is defined else '' }}"
              >
                {{ run.selector_text }}
              </option>
            {% endfor %}
          </select>
        </label>
      {% else %}
        <p class="empty">No saved runs yet.</p>
      {% endif %}
    </fieldset>

    {% if run_options %}
      <div class="list" data-plot-run-list></div>
    {% endif %}

    <fieldset>
      <legend>Series styling</legend>
      <p class="hint">Each selected scan or mirror variation gets its own legend, line, and marker controls.</p>
      <div class="list compact" data-series-style-list></div>
    </fieldset>
  </section>
</form>
{% if editing_plot %}<script type="application/json" data-editing-plot>{{ editing_plot | tojson }}</script>{% endif %}

<template data-plot-run-template>
  <fieldset class="plot-run" data-plot-run-item>
    <legend>
      <div class="plot-run-head">
        <strong data-run-title></strong>
        <button class="button" type="button" data-remove-run>Remove</button>
      </div>
    </legend>
    <input type="hidden" name="run_ids" value="" data-run-id-field>
    <div class="order-grid" data-order-grid></div>
    <div class="scan-selection" data-scan-grid></div>
    <div class="plot-loop-controls" data-loop-controls hidden>
      <p class="hint">Selected scans set the values of parameters without loops.</p>
      <div class="list compact" data-loop-list></div>
      <button class="button" type="button" data-add-loop>Add loop</button>
    </div>
  </fieldset>
</template>

<template data-plot-series-style-template>
  <fieldset class="plot-series-style" data-series-style-item>
    <legend data-series-style-title></legend>
    <div class="form-grid two-column">
      <label class="plot-series-legend-name">
        Legend name
        <input type="text" maxlength="160" placeholder="Use the standard series label" data-series-legend-label>
      </label>
      <label>
        Line and marker color
        <input type="color" value="#1f77b4" data-series-color>
      </label>
      <label>
        Marker type
        <select data-series-marker-symbol>
          {% for value, label in marker_symbols %}
            <option value="{{ value }}">{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        Marker size
        <input type="number" min="0" max="24" step="1" value="3" data-series-marker-size>
      </label>
      <label>
        Line style
        <select data-series-line-style>
          <option value="solid">Solid</option>
          <option value="dot">Dotted</option>
          <option value="dash">Dashed</option>
          <option value="dashdot">Dash-dot</option>
        </select>
      </label>
    </div>
  </fieldset>
</template>
{% endblock %}