{% from "_roughness_help.html" import roughness_help %}
{% extends "base.html" %}
{% from "_geometry_view.html" import geometry_view %}
{% block title %}New grating{% endblock %}
{% block body %}
<section class="section-head">
  <div>
    <h1>New grating</h1>
    <p>Etched grating profiles with optional coating layers</p>
  </div>
</section>

<section class="preview-panel" data-afm-workflow data-grating-section="afm">
  <h2>Import AFM profile</h2>
  <p>Upload a two-column x/z scan and preprocess one period before using it as a profile grating.</p>
  <form method="post" action="{{ url_for('process_afm') }}" enctype="multipart/form-data" data-afm-process-form data-afm-preview-url="{{ url_for('preview_afm') }}">
    <div class="afm-file-target-row">
      <label>AFM file <input type="file" name="afm_file" accept=".csv,.tsv,.txt,text/plain" required></label>
      <label>Target period, lines/mm <input name="afm_target_period_lpermm" type="number" min="1" step="1" value="{{ defaults.period_lpermm }}" data-afm-target-period></label>
      <label>Profile <select name="afm_profile_type" data-afm-profile-type><option value="blazed">Blazed</option><option value="laminar">Laminar</option></select></label>
    </div>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="raw"><figcaption>Uploaded scan</figcaption><svg role="img" aria-label="Uploaded AFM scan"></svg></figure>
    <label>Coordinate units <select name="afm_units"><option value="nm">nm</option><option value="um">µm</option><option value="m">m</option></select></label>
    <p class="subtle is-hidden" data-afm-units-hint role="status"></p>
    <label class="afm-check"><input type="checkbox" name="afm_reverse" value="1"> Reverse scan</label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="reverse"><figcaption>Reversed scan</figcaption><svg role="img" aria-label="Reversed AFM scan"></svg></figure>
    <label class="afm-check"><input type="checkbox" name="afm_zero_baseline" value="1" checked> Zero baseline</label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="baseline"><figcaption>Zero-baseline scan</figcaption><svg role="img" aria-label="Zero-baseline AFM scan"></svg></figure>
    <p class="subtle" data-afm-period-hint role="status">The AFM analysis uses the period from the Profile section below.</p>
    <label>Minimum separation fraction <input name="afm_min_separation" type="number" min="0" step="any" value="0.4"></label>
    <label>Minimum prominence fraction <input name="afm_min_prominence" type="number" min="0" step="any" value="0.1"></label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="troughs"><figcaption>Detected troughs</figcaption><svg role="img" aria-label="AFM scan with detected troughs"></svg></figure>
    <label>Period index <input name="afm_period_index" type="number" min="0" step="1" value="0"></label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="period"><figcaption>Selected period</figcaption><svg role="img" aria-label="Selected AFM period"></svg></figure>
    <label class="afm-check"><input type="checkbox" name="afm_average" value="1" checked> Average all detected periods</label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="average"><figcaption>Averaged period</figcaption><svg role="img" aria-label="Averaged AFM period"></svg></figure>
    <label class="afm-check"><input type="checkbox" name="afm_periodicity_ramp" value="1"> Apply periodicity-ramp correction</label>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="ramp"><figcaption>Periodicity-ramp correction (before and after)</figcaption><svg role="img" aria-label="AFM period before and after ramp correction"></svg></figure>
    <figure class="afm-stage-plot is-hidden" data-afm-plot="rescaled"><figcaption>Final profile at expected period</figcaption><svg role="img" aria-label="Final rescaled AFM profile"></svg></figure>
    <p class="subtle is-hidden" data-afm-preview-message role="status"></p>
    <button class="button" type="submit">Process AFM profile</button>
    <p class="notice is-hidden" data-afm-result role="status"></p>
  </form>
</section>

<div class="workspace-grid">
  <form
    class="form"
    method="post"
    action="{{ action_url }}"
    data-grating-preview-form
    data-preview-url="{{ url_for('preview_grating') }}"
  >
    <input type="hidden" name="afm_profile_path" data-afm-profile-path value="{{ defaults.afm_profile_path|default('') }}">
    <input type="hidden" name="afm_source_filename" data-afm-source-filename value="{{ defaults.afm_source_filename|default('') }}">
    <input type="hidden" name="afm_units" data-afm-units value="{{ defaults.afm_units|default('nm') }}">
    <input type="hidden" name="afm_profile_type" data-afm-profile-type value="{{ defaults.afm_profile_type|default('blazed') }}">
    <input type="hidden" name="afm_period_nm" data-afm-period-nm value="{{ defaults.afm_period_nm|default('0') }}">
    {% if form_error %}<p role="alert" class="notice notice-error">Please correct the following: {{ form_error }}</p>{% endif %}
    <datalist id="material-suggestions">
      {% for material in materials %}
        <option value="{{ material }}" data-density="{{ material_density_map.get(material, '') }}">{{ material }}</option>
      {% endfor %}
    </datalist>

    <fieldset>
      <legend>Profile</legend>
      <label>Name <input name="name" required value="{{ defaults.name|default('Untitled grating') }}"></label>
      <label>Type
        <select name="grating_type" data-grating-type>
          <option value="laminar" {% if defaults.grating_type == "laminar" %}selected{% endif %}>Laminar</option>
          <option value="sinusoidal" {% if defaults.grating_type == "sinusoidal" %}selected{% endif %}>Sinusoidal</option>
          <option value="afm" {% if defaults.grating_type == "afm" %}selected{% endif %}>AFM profile</option>
          <option value="blazed" {% if defaults.grating_type == "blazed" %}selected{% endif %}>Blazed</option>
        </select>
      </label>
      <label data-afm-main-period>Period, lines/mm <input name="period_lpermm" type="number" step="1" value="{{ defaults.period_lpermm }}"></label>
      <label>X resolution, nm <input name="x_resolution_nm" type="number" step="0.01" value="{{ defaults.x_resolution_nm }}"></label>
      <label>Z resolution, nm <input name="z_resolution_nm" type="number" step="0.01" value="{{ defaults.z_resolution_nm }}"></label>
    </fieldset>

    <fieldset data-grating-section="laminar">
      <legend>Laminar fields</legend>
      <label>Width / period <input name="width_to_period_ratio" type="number" step="0.01" value="{{ defaults.width_to_period_ratio }}"></label>
      <label>Depth, nm <input name="depth_nm" type="number" step="0.01" value="{{ defaults.depth_nm }}"></label>
      <label>Left wall angle, deg <input name="left_wall_angle_deg" type="number" step="0.01" value="{{ defaults.left_wall_angle_deg }}"></label>
      <label>Right wall angle, deg <input name="right_wall_angle_deg" type="number" step="0.01" value="{{ defaults.right_wall_angle_deg }}"></label>
    </fieldset>

    <fieldset data-grating-section="sinusoidal">
      <legend>Sinusoidal fields</legend>
      <label>Peak-to-valley depth, nm <input name="sinusoidal_depth_nm" type="number" step="any" min="0" value="{{ defaults.sinusoidal_depth_nm }}"></label>
    </fieldset>

    <fieldset data-grating-section="blazed">
      <legend>Blazed fields</legend>
      <label>Blaze angle, deg <input name="blaze_angle_deg" type="number" step="0.001" value="{{ defaults.blaze_angle_deg }}"></label>
      <label>Anti-blaze angle, deg <input name="anti_blaze_angle_deg" type="number" step="0.001" value="{{ defaults.anti_blaze_angle_deg }}"></label>
    </fieldset>

    <fieldset>
      <legend>Roughness model</legend>
      <label><span class="parameter-label">Model {{ roughness_help('model', 'model') }}</span>
        <select aria-label="Roughness model" name="roughness_kind" data-roughness-model>
          {% for value, label in [('none', 'None'), ('debye-waller', 'Debye–Waller'), ('random-interface', 'Random interface')] %}
          <option value="{{ value }}" {% if defaults.roughness_kind == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <p>Each layer's parameters describe its upper interface. RMS σ controls height variation; correlation length ξ controls its lateral scale. Blank σ means 0 nm; blank ξ means period / 10.</p>
      <p data-debye-explanation>Debye–Waller applies an effective damping correction to efficiencies; geometry remains smooth.</p>
      <div data-random-settings>
        <label><span class="parameter-label">Seed {{ roughness_help('roughness_seed', 'seed') }}</span> <input aria-label="Seed" name="roughness_seed" type="number" min="0" step="1" value="{{ defaults.roughness_seed }}"></label>
        <label><span class="parameter-label">Simulated periods {{ roughness_help('roughness_num_supercells', 'periods') }}</span> <input aria-label="Simulated periods" name="roughness_num_supercells" type="number" min="1" step="1" value="{{ defaults.roughness_num_supercells }}"></label>
        <label><span class="parameter-label">Realizations {{ roughness_help('roughness_num_realizations', 'realizations') }}</span> <input aria-label="Realizations" name="roughness_num_realizations" type="number" min="1" step="1" value="{{ defaults.roughness_num_realizations }}"></label>
        <p>Interfaces have independent random shapes. More periods and realizations increase simulation cost. Preview shows realization 1.</p>
      </div>
    </fieldset>
    {% include "_substrate_fields.html" %}
    {% set substrate_rendered = true %}
    {% include "_stack_fields.html" %}
    <button class="button primary" type="submit">{{ submit_label }}</button>
  </form>

  <section class="preview-panel">
    <div class="section-head preview-head">
      <div>
        <h2>Live preview</h2>
        <p data-grating-preview-status>{% if preview and preview.ok %}Ready{% else %}{{ preview.error if preview else "Preview unavailable" }}{% endif %}</p>
      </div>
      <span class="preview-pill" data-grating-preview-loading>Idle</span>
    </div>
    {{ geometry_view("grating", bind="[data-grating-preview-form]") }}
    <figure class="afm-stage-plot is-hidden" data-afm-live-preview>
      <figcaption data-afm-live-caption>AFM averaged single-period profile</figcaption>
      <svg role="img" aria-label="Live AFM single-period profile"></svg>
    </figure>
    {% if preview and preview.preview_url %}
      <img class="preview" src="{{ preview.preview_url }}" alt="Live grating preview" data-grating-preview-image>
    {% else %}
      <img class="preview is-hidden" src="" alt="Live grating preview" data-grating-preview-image>
    {% endif %}
    <p class="notice notice-error is-hidden" role="alert" tabindex="-1" data-grating-preview-error></p>
    <p data-roughness-warnings role="status">{{ (preview.warnings|default([]))|join(' ') if preview else '' }}</p>
    <img class="preview{% if not preview or not preview.roughness_preview_url %} is-hidden{% endif %}" src="{{ preview.roughness_preview_url|default('') or '' if preview else '' }}" alt="Random roughness interfaces and material map" data-roughness-preview-image>
  </section>
</div>
{% endblock %}