{% extends "base.html" %}
{% block title %}Augmented Parts · {{ app_name }}{% endblock %}
{% block body %}
{% include "_nav.html" %}
<main class="container">
  <h1>Augmented Parts</h1>

  <div class="card">
    <h2>Add part</h2>
    <form hx-post="/admin/augmented-parts" hx-target="#augmented-part-list" hx-swap="outerHTML" class="form-grid">
      <label>SKU <input type="text" name="sku" placeholder="optional"></label>
      <label>Description <input type="text" name="description" required></label>
      <label>Colour
        <select name="colour_id" required>
          <option value="">— select —</option>
          {% for pc in part_colours %}
            <option value="{{ pc.id }}">{{ pc.name }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Manufacturer
        <select name="manufacturer_id" required>
          <option value="">— select —</option>
          {% for m in manufacturers %}
            <option value="{{ m.id }}">{{ m.name }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Model
        <select name="scope_model_id">
          <option value="">— none —</option>
          {% for sm in scope_models %}
            <option value="{{ sm.id }}">{{ sm.name }} ({{ sm.manufacturer.name }})</option>
          {% endfor %}
        </select>
      </label>
      <label>Type
        <select name="part_type_id" required>
          <option value="">— select —</option>
          {% for pt in part_types %}
            <option value="{{ pt.id }}">{{ pt.name }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Sub Type
        <select name="sub_part_type_id">
          <option value="">— none —</option>
          {% for spt in sub_part_types %}
            <option value="{{ spt.id }}">{{ spt.name }} ({{ spt.part_type.name }})</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
  </div>

  <div class="card">
    <h2>Sync with Imported Parts</h2>
    <p class="muted">Creates Augmented Part entries for new Imported Parts, and removes entries for deleted Imported Parts.</p>
    <div class="row-actions">
      <form hx-post="/admin/augmented-parts/sync" hx-target="#augmented-part-list" hx-swap="outerHTML">
        <button type="submit" class="btn btn-primary">Sync now</button>
      </form>
      <a href="/admin/augmented-parts/skipped" class="btn btn-ghost">View skipped parts →</a>
    </div>
  </div>

  {% include "admin/_augmented_parts_table.html" %}
</main>
{% endblock %}