{% extends "base.html" %}
{% block title %}Web docs{% endblock %}
{% block body %}
<section class="section-head docs-hero">
  <div>
    <p class="docs-eyebrow">GraxPy web guide</p>
    <h1>From a model to a result</h1>
    <p>You know the optics. This guide shows where to create a model, run a calculation, and find its results in the website.</p>
  </div>
</section>

<section class="docs-guide-grid" aria-label="Choose a workflow">
  <a class="docs-guide-card" href="{{ url_for('web_docs_topic', topic='gratings') }}">
    <span class="docs-card-number">01</span><h2>Gratings</h2>
    <p>Define an etched profile and coating, then run energy, angle, or mount scans.</p>
    <span class="docs-card-link">Open grating guide →</span>
  </a>
  <a class="docs-guide-card" href="{{ url_for('web_docs_topic', topic='plane-mirrors') }}">
    <span class="docs-card-number">02</span><h2>Plane mirrors</h2>
    <p>Build a layer stack, preview reflectivity, and save a scan.</p>
    <span class="docs-card-link">Open plane-mirror guide →</span>
  </a>
  <a class="docs-guide-card" href="{{ url_for('web_docs_topic', topic='multilayer-gratings') }}">
    <span class="docs-card-number">03</span><h2>Multilayer gratings</h2>
    <p>Survey d-spacing and blaze angle, then scan selected designs over energy.</p>
    <span class="docs-card-link">Open multilayer guide →</span>
  </a>
</section>

<section class="docs-section">
  <h2>How the website is organized</h2>
  <ol class="docs-steps">
    <li><strong>Choose a workspace.</strong> The home page shows the active data folder. Use <strong>Choose folder…</strong> there to work in another local folder. Saved models, runs, and plots belong to that folder.</li>
    <li><strong>Create and save a model.</strong> Start from the Gratings, Plane mirrors, or Multilayer grating menu. Saving a grating or mirror gives you a page where you can set up a run.</li>
    <li><strong>Run and review.</strong> A run page shows progress and results. Use the matching <strong>Manage runs</strong> page to find it again.</li>
    <li><strong>Compare and download.</strong> Open <strong>Plots → New plot</strong> to combine saved runs. On a saved plot, <strong>Edit plot</strong> changes its settings, and <strong>Download</strong> offers PNG, plotted CSV data, or data with a Python plotting script.</li>
  </ol>
</section>
<section class="docs-section docs-note">
  <h2>Useful input conventions</h2>
  <p>Angles are labelled in degrees and lengths in the units shown beside each field. Choose S (TE) or P (TM) polarization in the run settings. Decimal fields follow your dot or comma preference; arrow buttons and a focused field's mouse wheel change values by the field's step.</p>
</section>
{% endblock %}