{% extends "base.html" %}
{% block title %}Import — alembic{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Manual import</h1>
    <p class="subtitle muted">For anything outside the normal playlist flow: a stray download, a one-off track, a Bandcamp leftover.</p>
  </div>
</div>

{% if request.query_params.get('run_id') %}
<div class="notice success">Import started (run #{{ request.query_params.get('run_id') }}). Check <a href="/settings/jobs">Jobs</a> for progress.</div>
{% endif %}

<div class="panel dropzone-panel" x-data="{ over: false }">
  <form method="post" action="/import/upload" enctype="multipart/form-data" x-ref="uploadForm">
    <label class="dropzone" :class="{ dragover: over }"
           @dragover.prevent="over = true"
           @dragleave.prevent="over = false"
           @drop.prevent="over = false">
      <svg class="dropzone-icon" width="30" height="30" viewBox="0 0 24 24" fill="none">
        <path d="M12 15V4M12 4l-4 4M12 4l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="dropzone-title">Drop a file here, or click to browse</span>
      <span class="dropzone-hint">Goes straight into import-me/</span>
      <input type="file" name="file" required @change="$refs.uploadForm.submit()">
    </label>
  </form>
</div>

<div class="page-header" style="margin-top:2.5rem; margin-bottom:1rem;">
  <div>
    <h2 style="margin:0;">Waiting to import</h2>
    <p class="subtitle muted">{{ contents | length }} item{{ "s" if contents | length != 1 else "" }} in import-me/.</p>
  </div>
  {% if contents %}
  <div class="actions">
    <form method="post" action="/import/run" class="inline" style="display:flex; gap:0.6rem; align-items:center;">
      <select name="playlist_name" title="Playlist tag (optional)" style="width:auto;">
        <option value="">No playlist tag</option>
        {% for p in playlists %}
        <option value="{{ p.name }}">{{ p.name }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="btn btn-primary">Import everything</button>
    </form>
  </div>
  {% endif %}
</div>

<div class="table-wrap scroll">
  <table>
    <thead><tr><th>Name</th><th></th></tr></thead>
    <tbody>
      {% for name in contents %}
      <tr>
        <td class="mono">{{ name }}</td>
        <td class="actions-cell">
          <form method="post" action="/import/run" class="inline">
            <input type="hidden" name="source" value="{{ name }}">
            <button type="submit" class="btn btn-sm btn-ghost">Import this</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="2">
        <div class="empty-state">
          <span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
          <p class="muted" style="margin:0;">Nothing waiting. Drop a file above to get started.</p>
        </div>
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}