{% extends "base.html" %}

{% block title %}Category Search - Flickr mail{% endblock %}

{% block style %}
<style>
  .article-link:visited { color: #6f42c1; }
</style>
{% endblock %}

{% block content %}
  <div class="container">
    <div class="row">
    <h1>Find articles needing images</h1>
    <p class="text-muted">Enter a Wikipedia category to find articles without images</p>

    <form action="{{ url_for('category_search') }}" method="get">
      <div class="mb-3">
        <label for="cat" class="form-label">Wikipedia category name or URL:</label>
        <input type="text" class="form-control" id="cat" name="cat" value="{{ cat }}"
               placeholder="e.g., Living people or https://en.wikipedia.org/wiki/Category:Living_people" required>
      </div>
      <input type="submit" class="btn btn-primary" value="Search">
      <a href="{{ url_for('start') }}" class="btn btn-outline-secondary ms-2">Back to main</a>
    </form>

    {% if error %}
    <div class="alert alert-danger mt-3">{{ error }}</div>
    {% endif %}

    {% if category and articles is defined %}
    <div class="mt-4">
      <h5>Articles without images in <a href="https://en.wikipedia.org/wiki/{{ category | replace(' ', '_') }}" target="_blank">{{ category_name }}</a></h5>

      {% if articles %}
      <p class="text-muted small">Found {{ articles | length }} article(s) without images</p>

      <div class="list-group">
        {% for article in articles %}
        <div class="list-group-item d-flex justify-content-between align-items-center">
          <a href="{{ url_for('start', enwp=article.title, cat=cat) }}" class="text-decoration-none article-link">{{ article.title }}</a>
          <a href="{{ article.wikipedia_url }}" target="_blank" class="badge bg-secondary text-decoration-none">Wikipedia</a>
        </div>
        {% endfor %}
      </div>

      {% if gcmcontinue %}
      <div class="mt-3">
        <a href="{{ url_for('category_search', cat=cat, gcmcontinue=gcmcontinue) }}" class="btn btn-outline-primary">Next page &raquo;</a>
      </div>
      {% endif %}

      {% else %}
      <div class="alert alert-success mt-3">
        All articles in this category have images!
      </div>
      {% endif %}
    </div>
    {% endif %}

    <div class="mt-4">
      <p class="text-muted small">
        <a href="{{ url_for('start') }}">Back to Flickr mail home</a>
      </p>
    </div>

    </div>
  </div>
{% endblock %}