{% extends "base.html" %}

{% block title %}Upload · Sparsifire{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7 col-md-9">
    
    <div class="mb-4 text-center">
      <h1 class="h3">New Dataset</h1>
      <p class="text-muted">Upload a JSON file containing the corpus of documents you want to analyze.</p>
    </div>

    <!-- Instructions / Format Warning -->
    <div class="alert alert-dark border border-secondary border-opacity-25 d-flex align-items-start gap-3 mb-4" role="alert">
      <div class="text-accent fs-4"><i class="bi bi-info-circle"></i></div>
      <div>
        <h6 class="alert-heading fw-bold mb-1">Required JSON Format</h6>
        <p class="small text-muted mb-2">
          Your file must be a list of objects. Each object <strong>must</strong> contain an <code>id</code> (string/number) and a <code>text</code> field.
        </p>
        <div class="bg-black rounded p-3 border border-secondary border-opacity-10">
<pre class="mb-0 text-muted font-monospace small" style="line-height: 1.4;">
[
  {
    <span class="text-accent">"id"</span>: "1",
    <span class="text-accent">"text"</span>: "Sparse autoencoders allow us to..."
  },
  {
    <span class="text-accent">"id"</span>: "2",
    <span class="text-accent">"text"</span>: "Dense embeddings are hard to interpret..."
  }
]
</pre>
        </div>
      </div>
    </div>

    <div class="panel">
      <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <!-- Project Name -->
        <div class="mb-3">
          <label class="form-label text-muted small text-uppercase fw-bold">Project Name</label>
          <input type="text" name="name" class="form-control form-control-lg" placeholder="e.g. arXiv Papers CS.LG" required>
          {% if form.name.errors %}
            <div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>
          {% endif %}
        </div>

        <!-- Description -->
        <div class="mb-3">
          <label class="form-label text-muted small text-uppercase fw-bold">Description (Optional)</label>
          <textarea name="description" class="form-control" rows="2" placeholder="Brief description of the corpus source..."></textarea>
        </div>

        <!-- Model Selection -->
        <div class="mb-4">
          <label class="form-label text-muted small text-uppercase fw-bold">Embedding Model</label>
          {{ form.model_name }}
          <div class="form-text text-muted small">Select the HuggingFace model used to generate embeddings.</div>
        </div>

        <!-- File Input Dropzone style -->
        <div class="mb-4">
          <label class="form-label text-muted small text-uppercase fw-bold">Source File (.json)</label>
          <div class="position-relative upload-zone">
            <input type="file" name="file" class="form-control position-absolute inset-0 opacity-0 w-100 h-100" style="cursor: pointer;" required>
            <div class="border border-dashed border-secondary border-opacity-50 rounded p-5 text-center bg-subtle hover-effect">
              <i class="bi bi-cloud-arrow-up text-accent fs-2 mb-2"></i>
              <p class="mb-0 fw-medium">Click or drag JSON file here</p>
              <small class="text-muted">Max size depends on server config</small>
            </div>
          </div>
          {% if form.file.errors %}
             <div class="text-danger small mt-1">{{ form.file.errors.0 }}</div>
          {% endif %}
        </div>

        <div class="d-grid gap-2">
          <button type="submit" class="btn btn-accent btn-lg">Create and Import</button>
          <a href="{% url 'embeddings:dataset_list' %}" class="btn btn-ghost text-muted">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}