{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{{ page_header(title) }}

<div class="glass-panel rounded-lg max-w-3xl mx-auto overflow-hidden">
  <div class="p-lg border-b border-[#1E293B] flex items-start justify-between gap-md">
    <div>
      <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Create a knowledge space</h2>
      <p class="text-body-sm font-body-sm text-on-surface-variant">A logical boundary for documents with its own access grants, retention and data policy.</p>
    </div>
    <span class="material-symbols-outlined text-primary text-[28px]" aria-hidden="true">library_books</span>
  </div>
  <form method="post" action="/admin/control/spaces" class="p-lg flex flex-col gap-lg">
    {% if form_error %}
    <p role="alert" class="text-body-sm font-body-sm text-error bg-error-container/20 border-l-4 border-error rounded-DEFAULT p-md">{{ form_error }}</p>
    {% endif %}
    <div>
      <label for="name" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">Name</label>
      <input id="name" name="name" required minlength="1" maxlength="120" autocomplete="off" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm">
    </div>
    <div>
      <label for="slug" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">Slug</label>
      <input id="slug" name="slug" required minlength="1" maxlength="64" pattern="[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?" autocomplete="off" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm" placeholder="e.g. fleet-ops-procedures">
      <p class="text-code-sm font-code-sm text-on-surface-variant mt-xs">Lowercase letters, numbers and single hyphens only.</p>
    </div>
    <div>
      <label for="data_policy" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">Data policy</label>
      <select id="data_policy" name="data_policy" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm">
        {% for policy in data_policies %}
        <option value="{{ policy.value }}" {{ "selected" if policy.value == "local_only" else "" }}>{{ policy.value }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="retention_days" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">Retention (days)</label>
      <input id="retention_days" name="retention_days" type="number" min="1" autocomplete="off" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm" placeholder="Defaults to 90 days">
    </div>
    <div class="flex items-center justify-end gap-sm pt-md border-t border-[#1E293B]">
      <a href="/admin/control/spaces" class="btn-ghost px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">Cancel</a>
      <button type="submit" class="btn-primary px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">Create knowledge space</button>
    </div>
  </form>
</div>
{% endblock %}