{% extends "modal_base.html" %}
{% block form_attributes %}
hx-post="/ingress-form"
enctype="multipart/form-data"
{% endblock %}
{% block modal_content %}
<h3 class="text-xl font-extrabold tracking-tight">Add New Content</h3>
<div class="flex flex-col gap-3">
  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Content</div>
    <textarea name="content" class="nb-input w-full min-h-28"
      placeholder="Paste a URL or type/paste text to ingest…">{{ content }}</textarea>
  </label>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Context</div>
    <textarea name="context" class="nb-input w-full min-h-24"
      placeholder="Optional: add context to guide how the content should be interpreted…">{{ context }}</textarea>
  </label>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Category</div>
    <input type="text" name="category" class="nb-input validator w-full" value="{{ category }}" list="category-list" required />
    <datalist id="category-list">
      {% for category in user_categories %}
      <option value="{{ category }}" />
      {% endfor %}
    </datalist>
    <div class="validator-hint hidden text-xs opacity-70 mt-1">Category is required</div>
  </label>

  <label class="w-full">
    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Files</div>
    <input type="file" name="files" multiple class="file-input w-full rounded-none border-2 border-neutral" />
  </label>
</div>

<div id="error-message" class="text-error text-center {% if not error %}hidden{% endif %}">{{ error }}</div>
<script>
  (function () {
    const form = document.getElementById('modal_form');
    if (!form) return;
    const targetElement = document.getElementById('active_jobs_section');
    if (targetElement) {
      form.setAttribute('hx-target', '#active_jobs_section');
      form.setAttribute('hx-swap', 'beforeend');
    } else {
      form.setAttribute('hx-swap', 'none');
      form.removeAttribute('hx-target');
    }
  })();
</script>
{% endblock %}
{% block primary_actions %}
<button type="submit" class="nb-btn nb-cta">
  Add Content
</button>
{% endblock %}