{% extends "base.html" %}
{% block title %}Plots{% endblock %}
{% block body %}
<section class="section-head">
  <div>
    <h1>Compare saved runs</h1>
    <p>Combine saved runs and select the diffraction orders to overlay.</p>
  </div>
</section>

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

<form
  class="form plot-workspace-layout"
  method="post"
  action="{{ 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>Live plot preview</h2>
        <p data-plot-preview-status>Select saved runs and orders to see the interactive combined 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 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="Combined plot">
      </label>
      <div class="form-grid two-column">
        <label>
          X axis
          <select name="x_axis_type">
            <option value="linear" selected>Linear</option>
            <option value="log">Logarithmic</option>
          </select>
        </label>
        <label>
          Y axis
          <select name="y_axis_type">
            <option value="linear" selected>Linear</option>
            <option value="log">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(',') }}"
              >
                {{ 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 run and diffraction order gets its own line and marker controls.</p>
      <div class="list compact" data-series-style-list></div>
    </fieldset>
  </section>
</form>

<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>
  </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 three-column">
      <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="1" max="24" step="1" value="3" data-series-marker-size>
      </label>
    </div>
  </fieldset>
</template>
{% endblock %}