{% extends 'base.html' %}
{% block title %}Import CSV{% endblock %}
{% block page_title %}Import CSV{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Bulk Import via CSV</h1>
    <p>Upload a CSV file to batch-create posts and schedules</p>
  </div>
</div>

<div class="grid-2" style="gap:24px;align-items:start">
  <div>
    <form method="POST" action="{{ url_for('csv_import.preview') }}" enctype="multipart/form-data" id="uploadForm">
      <div class="card">
        <div class="card-title">📤 Upload CSV</div>

        <div class="drop-zone" id="dropZone">
          <div class="drop-zone-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
          </div>
          <div class="drop-zone-text">Click or drag &amp; drop your CSV file</div>
          <div class="drop-zone-hint">Max 10MB · UTF-8 encoded</div>
          <input type="file" id="csvFile" name="csv_file" accept=".csv" style="display:none" required />
        </div>

        <div style="margin-top:20px">
          <button type="submit" class="btn btn-primary" style="width:100%">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Preview &amp; Validate
          </button>
        </div>
      </div>
    </form>
  </div>

  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
      <div class="card-title" style="margin-bottom:0">📋 CSV Format Guide</div>
      <a href="{{ url_for('static', filename='example.csv') }}" class="btn btn-secondary btn-sm" download>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Download Example
      </a>
    </div>
    <p style="font-size:0.875rem;color:var(--text-secondary);margin-bottom:16px">Your CSV must have a <code>content</code> column. All others are optional:</p>
    <div class="table-wrap" style="margin-bottom:16px">
      <table>
        <thead><tr><th>Column</th><th>Required</th><th>Example</th></tr></thead>
        <tbody>
          <tr><td><code>content</code></td><td><span class="badge badge-danger">Yes</span></td><td>Hello World!</td></tr>
          <tr><td><code>media_url</code></td><td><span class="badge badge-muted">No</span></td><td>https://…/image.jpg</td></tr>
          <tr><td><code>link_url</code></td><td><span class="badge badge-muted">No</span></td><td>https://example.com</td></tr>
          <tr><td><code>media_type</code></td><td><span class="badge badge-muted">No</span></td><td>image / video / link / none</td></tr>
          <tr><td><code>schedule_type</code></td><td><span class="badge badge-muted">No</span></td><td>once / daily / weekly</td></tr>
          <tr><td><code>scheduled_at</code></td><td><span class="badge badge-muted">No</span></td><td>2025-06-01 09:00:00</td></tr>
          <tr><td><code>page_id</code></td><td><span class="badge badge-muted">No</span></td><td>{{ pages[0].page_id if pages else '1234567890' }}</td></tr>
        </tbody>
      </table>
    </div>
    <p style="font-size:0.78rem;color:var(--text-muted)">Example row:<br><code>Check this out!,https://…/img.jpg,,image,daily,2025-06-01 09:00:00,{{ pages[0].page_id if pages else '1234567890' }}</code></p>
  </div>
</div>
{% endblock %}