{% 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">Upload a document to {{ space.name }}</h2>
      <p class="text-body-sm font-body-sm text-on-surface-variant">The document is parsed, chunked, embedded and indexed automatically. It appears in the list below once processing finishes -- usually within a few seconds.</p>
    </div>
    <span class="material-symbols-outlined text-primary text-[28px]" aria-hidden="true">upload_file</span>
  </div>
  <form method="post" action="/admin/control/spaces/{{ space.id }}/documents/upload" enctype="multipart/form-data" 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="file" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">File</label>
      <input id="file" name="file" type="file" required accept=".txt,.md,.csv,.json,text/plain,text/markdown,text/csv,application/json" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm">
      <p class="text-code-sm font-code-sm text-on-surface-variant mt-xs">Plain text, Markdown, CSV or JSON, up to 50 MB. PDF and DOCX are accepted by the size/type check but have no parser yet, so they will fail during processing.</p>
    </div>
    <div class="flex items-center justify-end gap-sm pt-md border-t border-[#1E293B]">
      <a href="/admin/control/spaces/{{ space.id }}/documents" 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">Upload</button>
    </div>
  </form>
</div>
{% endblock %}