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

  <div class="card">
    <h2>Add attachment point</h2>
    <form hx-post="/admin/attachment-points"
          hx-target="#attachment-point-list"
          hx-swap="outerHTML"
          class="form-grid">
      <label>Augmented Part
        <select name="augmented_part_id" required>
          <option value="">— select —</option>
          {% for part in augmented_parts %}
            <option value="{{ part.id }}">{{ part.description }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Point Name
        <select name="attachment_point_name_id" required>
          <option value="">— select —</option>
          {% for apn in attachment_point_names %}
            <option value="{{ apn.id }}">{{ apn.name }}</option>
          {% endfor %}
        </select>
      </label>
      <label>Connection Type
        <select name="connection_type" required
                hx-get="/admin/attachment-points/connection-options"
                hx-target="#add-connection-options"
                hx-trigger="change"
                hx-include="[name='connection_type']">
          <option value="">— select type —</option>
          <option value="iso_thread">ISO Thread</option>
          <option value="unc_thread">UNC Thread</option>
          <option value="clamp_connection">Clamp Connection</option>
          <option value="static_connection">Static Connection</option>
        </select>
      </label>
      <div id="add-connection-options"></div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
  </div>

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