{% extends "base.html" %}
{% block title %}Run · {{ project.name }}{% endblock %}
{% block body %}
{% set active_tab = 'run' %}
{% include '_project_tabs.html' %}
<p class="muted" style="margin:-12px 0 20px">{{ counts.macbeth }} Macbeth · {{ counts.alsc }} ALSC · {{ counts.cac }} CAC images{% if excluded_count %} · <span style="color:var(--warn)">{{ excluded_count }} excluded</span>{% endif %}</p>

<div class="grid" x-data='runApp({ project: {{ project.name|tojson }} })'>
  <div class="card">
    <div class="card-head"><h2>Options</h2></div>

    <div class="field">
      <label>Target platform</label>
      <div class="seg">
        <button type="button" :class="{active: targets==='pisp,vc4'}" @click="targets='pisp,vc4'">Both</button>
        <button type="button" :class="{active: targets==='pisp'}" @click="targets='pisp'">PiSP</button>
        <button type="button" :class="{active: targets==='vc4'}" @click="targets='vc4'">VC4</button>
      </div>
    </div>

    <div class="field">
      <label>Mode</label>
      <div class="seg">
        <button type="button" :class="{active: mode==='full'}" @click="mode='full'">Full</button>
        <button type="button" :class="{active: mode==='alsc-only'}" @click="mode='alsc-only'">ALSC only</button>
        <button type="button" :class="{active: mode==='colour-only'}" @click="mode='colour-only'">Colour only</button>
      </div>
    </div>

    <div class="field">
      <label>Black level (-1 auto)</label>
      <input type="number" x-model.number="blacklevel" min="-1" max="65535" step="1">
    </div>

    <div class="divider"></div>
    <h3>AWB &amp; CCM</h3>

    <label class="flex" style="margin:10px 0 12px;font-weight:600">
      <input type="checkbox" style="width:auto" x-model="greyworld"> Grey-world AWB (instead of Macbeth-based)
    </label>
    <div class="field">
      <label>CCM optimisation</label>
      <div class="seg">
        <button type="button" :class="{active: matrixSelection==='average'}" @click="matrixSelection='average'">Average ΔE</button>
        <button type="button" :class="{active: matrixSelection==='maximum'}" @click="matrixSelection='maximum'">Worst ΔE</button>
        <button type="button" :class="{active: matrixSelection==='patches'}" @click="matrixSelection='patches'">Patches</button>
      </div>
      <div class="hint">What the colour matrix minimises: average across all patches (default), the single worst patch, or a chosen subset.</div>
    </div>
    <div class="field" x-show="matrixSelection==='patches'" x-cloak>
      <label>Test patches (1–24, comma-separated)</label>
      <input type="text" x-model="testPatches" placeholder="1,2,5,8,9,12,14">
    </div>

    <div class="divider"></div>
    <h3>ALSC (lens shading)</h3>

    <label class="flex" style="margin:10px 0 12px;font-weight:600">
      <input type="checkbox" style="width:auto" x-model="doAlscColour"> ALSC colour shading
    </label>
    <div class="field-row">
      <div class="field">
        <label>Luminance strength</label>
        <input type="number" x-model.number="luminanceStrength" min="0" max="1" step="0.05">
      </div>
      <div class="field">
        <label>Max gain</label>
        <input type="number" x-model.number="maxGain" min="1" max="16" step="0.5">
      </div>
    </div>

    <div class="divider"></div>
    <h3>Lux</h3>
    <div class="field">
      <label>Reference</label>
      <div class="seg">
        <button type="button" :class="{active: luxMode==='single'}" @click="luxMode='single'">Single capture</button>
        <button type="button" :class="{active: luxMode==='average'}" @click="luxMode='average'">Robust average</button>
      </div>
    </div>
    <div class="field" x-show="luxMode==='single'" x-cloak>
      <label>Anchor lux</label>
      <input type="number" x-model.number="luxAnchor" min="1" step="50" placeholder="1000">
      <div class="hint">Anchors the lux calibration on the single capture closest to this lux level (default 1000).</div>
    </div>
    <div class="field" x-show="luxMode==='average'" x-cloak>
      <label>Method</label>
      <div class="seg">
        <button type="button" :class="{active: luxMethod==='trimmed-mean'}" @click="luxMethod='trimmed-mean'">Trimmed mean</button>
        <button type="button" :class="{active: luxMethod==='median'}" @click="luxMethod='median'">Median</button>
      </div>
      <div class="hint"><b>Robust average</b> of luminance-per-lux across all captures — less hostage to any one image. <b>Median</b> resists a cluster of similar captures (e.g. several of one illuminant) better than the trimmed mean; both spread per-illuminant error across the set.</div>
    </div>

    <div class="divider"></div>
    <div class="btn-row mt">
      <button class="btn primary" :disabled="running" @click="start()">
        <span x-text="running ? 'Running…' : '▶ Run calibration'"></span>
      </button>
      <button class="btn ghost" x-show="done" @click="window.location='{{ url_for('results_page', name=project.name) }}'">View results &rarr;</button>
    </div>
  </div>

  <div class="card">
    <div class="card-head">
      <h2>Console</h2>
      <span class="chip" x-show="exitCode!==null" :class="exitCode===0 ? 'cac' : ''"
            x-text="exitCode===0 ? 'completed' : 'exit '+exitCode" x-cloak></span>
    </div>
    <div class="console" id="console" x-ref="console"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/alpine.min.js') }}" defer></script>
{% endblock %}