{% extends "base.html" %}
{% set active = 'schemas' %}
{% block content %}
<div style="display:flex; justify-content:space-between; align-items:center;">
  <h2>Schemas</h2>
  <button onclick="document.getElementById('create-schema').removeAttribute('open') || document.getElementById('create-schema').setAttribute('open','')">
    + New schema
  </button>
</div>

<dialog id="create-schema">
  <article>
    <header>
      <button aria-label="Close" rel="prev" onclick="document.getElementById('create-schema').removeAttribute('open')"></button>
      <h3>Create schema</h3>
    </header>
    <form method="post" action="/ui/schemas">
      <label>Name <input name="name" required autofocus></label>
      <label>Description <input name="description"></label>
      <label>Parent schema (optional)
        <select name="parent">
          <option value="">— none —</option>
          {% for s in schemas %}
          <option value="{{ s.name }}">{{ s.name }}</option>
          {% endfor %}
        </select>
      </label>
      <footer>
        <button type="submit">Create</button>
      </footer>
    </form>
  </article>
</dialog>

{% if schemas %}
<table>
  <thead><tr><th>Name</th><th>Parent</th><th>Fields</th><th>Description</th><th></th></tr></thead>
  <tbody>
    {% for s in schemas %}
    <tr>
      <td><a href="/ui/schemas/{{ s.name }}">{{ s.name }}</a></td>
      <td>{{ s.parent_name or '—' }}</td>
      <td>{{ s.field_count }}</td>
      <td>{{ s.description or '' }}</td>
      <td>
        <form method="post" action="/ui/schemas/{{ s.name }}/delete" style="display:inline;"
              onsubmit="return confirm('Delete schema {{ s.name }}?')">
          <button type="submit" class="outline" style="padding:0.2rem 0.6rem; font-size:0.8rem;">Delete</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<p>No schemas yet.</p>
{% endif %}
{% endblock %}