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

<dialog id="create-dataset">
  <article>
    <header>
      <button aria-label="Close" rel="prev" onclick="document.getElementById('create-dataset').removeAttribute('open')"></button>
      <h3>Create dataset</h3>
    </header>
    <form method="post" action="/ui/datasets">
      <label>Name <input name="name" required autofocus></label>
      <label>Description <input name="description"></label>
      <label>Schema
        <select name="schema_name" required>
          <option value="">— select —</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 datasets %}
<table>
  <thead><tr><th>Name</th><th>Schema</th><th>Records</th><th>Description</th><th></th></tr></thead>
  <tbody>
    {% for d in datasets %}
    <tr>
      <td><a href="/ui/datasets/{{ d.name }}">{{ d.name }}</a></td>
      <td><a href="/ui/schemas/{{ d.schema_name }}">{{ d.schema_name }}</a></td>
      <td>{{ d.record_count }}</td>
      <td>{{ d.description or '' }}</td>
      <td>
        <form method="post" action="/ui/datasets/{{ d.name }}/delete" style="display:inline;"
              onsubmit="return confirm('Delete dataset {{ d.name }} and all its records?')">
          <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 datasets yet.</p>
{% endif %}
{% endblock %}