{% extends "base.html" %}
{% block title %}Crawls — product-ui{% endblock %}
{% block content %}

{# ── New Crawl ─────────────────────────────────────────────────────────── #}
<div class="card mb-4">
  <div class="card-header fw-semibold">New Crawl</div>
  <div class="card-body">
    {% if error %}
    <div class="alert alert-danger py-2">{{ error }}</div>
    {% endif %}
    <form method="post" action="/fetch" class="d-flex gap-2">
      <input type="url" name="url" class="form-control" placeholder="https://…" required
             value="{{ filters.url if filters.url else '' }}">
      <button type="submit" class="btn btn-primary text-nowrap">Crawl</button>
    </form>
  </div>
</div>

{# ── Filters ───────────────────────────────────────────────────────────── #}
<form method="get" action="/" class="card mb-4">
  <div class="card-header fw-semibold">Filter</div>
  <div class="card-body row g-2">
    <div class="col-md-2">
      <input type="text" name="provider" class="form-control form-control-sm" placeholder="Provider"
             value="{{ filters.provider }}">
    </div>
    <div class="col-md-4">
      <input type="text" name="url" class="form-control form-control-sm" placeholder="URL contains…"
             value="{{ filters.url }}">
    </div>
    <div class="col-md-2">
      <input type="text" name="id" class="form-control form-control-sm" placeholder="ID"
             value="{{ filters.id }}">
    </div>
    <div class="col-md-2">
      <input type="text" name="title" class="form-control form-control-sm" placeholder="Title contains…"
             value="{{ filters.title }}">
    </div>
    <div class="col-md-1">
      <input type="text" name="date" class="form-control form-control-sm" placeholder="Date"
             value="{{ filters.date }}">
    </div>
    <div class="col-auto d-flex gap-2">
      <button type="submit" class="btn btn-sm btn-secondary">Filter</button>
      <a href="/" class="btn btn-sm btn-outline-secondary">Clear</a>
    </div>
  </div>
</form>

{# ── Crawl list ────────────────────────────────────────────────────────── #}
<h6 class="text-muted mb-2">{{ entries|length }} crawl(s)</h6>
{% if entries %}
<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-dark">
      <tr>
        <th>Provider</th>
        <th>Title</th>
        <th>ID</th>
        <th>URL</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      {% for e in entries %}
      <tr>
        <td><span class="badge bg-secondary">{{ e.provider }}</span></td>
        <td>
          <a href="/crawl?url={{ e.path | urlencode }}">
            {{ e.title | truncate(60) }}
          </a>
        </td>
        <td class="text-muted small">{{ e.id }}</td>
        <td class="text-muted small url-cell">
          <a href="{{ e.url }}" target="_blank" rel="noopener" class="text-truncate d-block" style="max-width:280px">
            {{ e.url }}
          </a>
        </td>
        <td class="text-muted small text-nowrap">{{ e.date[:19] | replace("T", " ") }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<p class="text-muted">No crawls yet. Enter a product URL above to get started.</p>
{% endif %}

{% endblock %}