{% extends "base.html" %}
{% block content %}

<section class="card">
  <h1>Upload a PDF</h1>
  <p class="muted">Each page will be rendered to fit inside the pixel box below, then split into per-article images and
    text.</p>
  <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
    <label class="file">
      <span>PDF file</span>
      <input type="file" name="pdf" accept="application/pdf" required>
    </label>
    <div class="row">
      <label>
        <span>Target width (px)</span>
        <input type="number" name="width" value="4200" min="1000" max="10000">
      </label>
      <label>
        <span>Target height (px)</span>
        <input type="number" name="height" value="7400" min="1000" max="14000">
      </label>
    </div>
    <button type="submit">Start extraction</button>
  </form>
</section>

<section class="card">
  <h2>Recent jobs</h2>
  {% if jobs %}
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>File</th>
        <th>Pages</th>
        <th>Articles</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for j in jobs %}
      <tr>
        <td><code>{{ j.id }}</code></td>
        <td>{{ j.filename }}</td>
        <td>{{ j.pages }}</td>
        <td>{{ j.articles }}</td>
        <td><span class="status status-{{ j.status }}">{{ j.status }}</span></td>
        <td><a href="{{ url_for('job_view', job_id=j.id) }}">Open</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted">No jobs yet.</p>
  {% endif %}
</section>

{% endblock %}