{% extends "base.html" %}
{% block title %}Upload — {{ project.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <nav class="breadcrumb"><a href="/projects/{{ project.id }}">{{ project.name }}</a> / Upload</nav>
    <h1>Upload Images</h1>
    <p class="subtitle">Drag & drop or select image files</p>
  </div>
</div>

<div class="upload-zone" id="drop-zone">
  <div class="upload-icon">⬆</div>
  <p>Drop images here or click to browse</p>
  <input type="file" id="file-input" multiple accept="image/*" hidden>
  <button class="btn btn-secondary" onclick="document.getElementById('file-input').click()">Browse Files</button>
</div>

<div id="upload-progress" class="upload-progress hidden"></div>
<div id="upload-results" class="section"></div>

<div class="form-actions" style="margin-top:2rem">
  <a href="/projects/{{ project.id }}" class="btn btn-ghost">Back to Project</a>
  <a href="/projects/{{ project.id }}/annotate" class="btn btn-primary">Next: Annotate (Label Assist) →</a>
</div>
{% endblock %}
{% block scripts %}
<script>
const PROJECT_ID = {{ project.id }};
</script>
<script src="/static/js/upload.js"></script>
{% endblock %}