{% extends "base.html" %}

{% block title %}Upload - Context7 Docs{% endblock %}

{% block content %}
<h2>Upload Documentation Files</h2>

<form method="post" enctype="multipart/form-data" class="upload-form">
    <!-- Library Selector -->
    <label for="library_id">Select Library:</label>
    <select id="library_id" name="library_id" required>
        <option value="">(New library - will be created from filename)</option>
        {% for lib in libraries %}
            <option value="{{ lib.id }}" data-name="{{ lib.name or lib.id }}">{{ lib.name or lib.id }}</option>
        {% endfor %}
    </select>

    <!-- File Input (multiple files allowed) -->
    <label for="files">Select Files:</label>
    <input type="file" name="files" id="files" multiple accept=".md,.txt,.py,.js,.ts,.json,.yaml,.yml,.html,.css,.pdf" required>

    <!-- Ingest Checkbox -->
    <div style="margin-top: 10px;">
        <label>
            <input type="checkbox" name="ingest_after_upload" value="on">
            Trigger ingestion after upload
        </label>
    </div>

    <button type="submit" class="btn btn-primary">Upload Files</button>
</form>

<!-- Allowed extensions hint -->
<p class="hint">Allowed: .md, .txt, .py, .js, .ts, .json, .yaml, .yml, .html, .css, .pdf (max 5MB each)</p>

<!-- Results Display -->
<div id="upload-result" class="result-box"></div>

{% if results %}
<h3>Upload Results</h3>
<ul>
    {% for result in results %}
    <li><strong>{{ result.filename }}</strong>: {{ result.status }} - {{ escapeHtml(result.message) }}</li>
    {% endfor %}
</ul>
{% endif %}

{% endblock %}