{% extends "base.html" %}

{% block title %}Flickr mail{% endblock %}

{% block content %}
  <div class="container">
    <div class="row">
    <h1>Flickr mail</h1>
    <form action="{{ url_for(request.endpoint) }}">
      <div class="mb-3">
        <label for="enwp" class="form-label">Wikipedia article URL or title:</label>
        <input type="text" class="form-control" id="enwp" name="enwp" value="{{ enwp }}" required>
      </div>

      <input type="submit" class="btn btn-primary" value="Search">
      <a href="{{ url_for('category_search') }}" class="btn btn-outline-secondary ms-2">Find articles by category</a>
    </form>

    {% if recent_uploads is defined and recent_uploads and not name %}
    <div class="mt-4">
      <h5>Recent uploads to Wikimedia Commons</h5>
      <p class="text-muted small">{{ total_uploads }} photos obtained via Flickr mail requests</p>
      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
        {% for upload in recent_uploads %}
        <div class="col">
          <div class="card h-100">
            <div class="row g-0">
              <div class="col-4">
                <a href="{{ upload.commons_url }}">
                  <img src="{{ upload.thumb_url }}" alt="{{ upload.title }}" class="img-fluid rounded-start" style="aspect-ratio: 1; object-fit: cover; width: 100%;">
                </a>
              </div>
              <div class="col-8">
                <div class="card-body p-2">
                  <p class="card-text small mb-1 text-truncate" title="{{ upload.title }}">
                    <a href="{{ upload.commons_url }}" class="text-decoration-none">{{ upload.title }}</a>
                  </p>
                  <p class="card-text small mb-1">
                    {% if upload.creator_profile_url %}
                    <a href="{{ upload.creator_profile_url }}" class="text-muted text-decoration-none">{{ upload.creator }}</a>
                    {% else %}
                    <span class="text-muted">{{ upload.creator }}</span>
                    {% endif %}
                  </p>
                  {% if upload.wikipedia_url %}
                  <p class="card-text small mb-0">
                    <a href="{{ upload.wiki_link_url }}" class="text-decoration-none"><small>{{ upload.wiki_link_label }}</small></a>
                  </p>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if name and search_result is defined and search_result.photos %}

    {% if cat %}
    <p><a href="{{ url_for('category_search', cat=cat) }}">&larr; Back to category</a></p>
    {% endif %}
    <p>Wikipedia article: {{ name }}</p>
    {% if wikipedia_extract %}<p class="text-muted">{{ wikipedia_extract }}</p>{% endif %}
    <form action="{{ url_for(request.endpoint) }}" class="mb-3 d-flex align-items-center gap-2">
      <input type="hidden" name="enwp" value="{{ enwp }}">
      {% if cat %}<input type="hidden" name="cat" value="{{ cat }}">{% endif %}
      <label for="flickr_search" class="form-label mb-0 text-nowrap">Flickr search:</label>
      <input type="text" class="form-control form-control-sm" id="flickr_search" name="flickr_search" value="{{ flickr_search }}" style="max-width: 300px;">
      <button type="submit" class="btn btn-sm btn-primary">Search</button>
    </form>
    <p>Select a photo to compose a message ({{ search_result.total_photos | default(0) }} results):</p>

    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-3">
      {% for photo in search_result.photos %}
      <div class="col">
        <div class="card h-100">
          <a href="{{ url_for(request.endpoint, enwp=enwp, flickr=photo.flickr_url, img=photo.medium_url, license=photo.license, flickr_user=photo.realname or photo.username, cat=cat, flickr_search=flickr_search) }}">
            <img src="{{ photo.thumb_url }}" alt="{{ photo.title }}" class="card-img-top" style="aspect-ratio: 1; object-fit: cover;">
          </a>
          <div class="card-body p-2">
            <p class="card-text small mb-1 text-truncate" title="{{ photo.realname or photo.username }}">{{ photo.realname or photo.username }}</p>
            <span class="badge {{ 'bg-success' if photo.license in [4, 5, 7, 8, 9, 10, 14, 15] else 'bg-secondary' }}">{{ photo.license_name }}</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    {% if search_result.total_pages > 1 %}
    <nav aria-label="Search results pagination">
      <ul class="pagination justify-content-center">
        {% if search_result.current_page > 1 %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, flickr_search=flickr_search, page=search_result.current_page - 1, cat=cat) }}">Previous</a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <span class="page-link">Previous</span>
        </li>
        {% endif %}

        {% set start_page = [1, search_result.current_page - 2] | max %}
        {% set end_page = [search_result.total_pages, search_result.current_page + 2] | min %}

        {% if start_page > 1 %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, flickr_search=flickr_search, page=1, cat=cat) }}">1</a>
        </li>
        {% if start_page > 2 %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
        {% endif %}
        {% endif %}

        {% for p in range(start_page, end_page + 1) %}
        <li class="page-item {{ 'active' if p == search_result.current_page else '' }}">
          <a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, flickr_search=flickr_search, page=p, cat=cat) }}">{{ p }}</a>
        </li>
        {% endfor %}

        {% if end_page < search_result.total_pages %}
        {% if end_page < search_result.total_pages - 1 %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
        {% endif %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, flickr_search=flickr_search, page=search_result.total_pages, cat=cat) }}">{{ search_result.total_pages }}</a>
        </li>
        {% endif %}

        {% if search_result.current_page < search_result.total_pages %}
        <li class="page-item">
          <a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, flickr_search=flickr_search, page=search_result.current_page + 1, cat=cat) }}">Next</a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <span class="page-link">Next</span>
        </li>
        {% endif %}
      </ul>
    </nav>
    {% endif %}

    <p class="text-muted small">
      <a href="https://flickr.com/search/?view_all=1&text={{ flickr_search | urlencode }}" target="_blank">View full search on Flickr</a>
    </p>

    {% elif name and not flickr_url %}

    {% if cat %}
    <p><a href="{{ url_for('category_search', cat=cat) }}">&larr; Back to category</a></p>
    {% endif %}
    <p>Wikipedia article: {{ name }}</p>
    {% if wikipedia_extract %}<p class="text-muted">{{ wikipedia_extract }}</p>{% endif %}
    <form action="{{ url_for(request.endpoint) }}" class="mb-3 d-flex align-items-center gap-2">
      <input type="hidden" name="enwp" value="{{ enwp }}">
      {% if cat %}<input type="hidden" name="cat" value="{{ cat }}">{% endif %}
      <label for="flickr_search_empty" class="form-label mb-0 text-nowrap">Flickr search:</label>
      <input type="text" class="form-control form-control-sm" id="flickr_search_empty" name="flickr_search" value="{{ flickr_search }}" style="max-width: 300px;">
      <button type="submit" class="btn btn-sm btn-primary">Search</button>
    </form>
    <div class="alert alert-warning">No photos found. Try a different search term.</div>
    <p><a href="https://flickr.com/search/?view_all=1&text={{ flickr_search | urlencode }}" target="_blank">Search on Flickr directly</a></p>

    {% endif %}

    {% if flickr_url %}
    <div class="row">
      {% if img_url %}
      <div class="col-md-4 mb-3">
        <a href="{{ flickr_url }}" target="_blank">
          <img src="{{ img_url }}" alt="Selected photo" class="img-fluid rounded">
        </a>
        <p class="mt-2 small"><a href="{{ flickr_url }}" target="_blank">View on Flickr</a></p>
      </div>
      <div class="col-md-8">
      {% else %}
      <div class="col-12">
      {% endif %}
        {% if flickr_user %}
        <p><strong>User:</strong> <a href="{{ flickr_user_url }}" target="_blank">{{ flickr_user }}</a></p>
        {% endif %}
        {% if previous_messages %}
        <div class="alert alert-info">
          <strong>Previously contacted:</strong> You have sent {{ previous_messages | length }} message(s) to this user.
          <ul class="mb-0 mt-2">
            {% for msg in previous_messages %}
            <li><a href="{{ msg.url }}" target="_blank">{{ msg.subject }}</a> <small class="text-muted">({{ msg.date }})</small></li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        {% if is_free_license %}
        <div class="alert alert-success">
          <strong>Ready to upload!</strong> This photo is licensed under <span class="badge bg-success">{{ license_name }}</span> and can be used on Wikipedia.
        </div>
        <p>
          <a href="https://commons.wikimedia.org/wiki/Special:UploadWizard" class="btn btn-primary" target="_blank">
            Upload to Wikimedia Commons
          </a>
        </p>
        <p class="text-muted small">
          After uploading, you can add the image to the Wikipedia article for <a href="{{ wikipedia_url }}" target="_blank">{{ name }}</a>.
        </p>
        {% else %}
        <p><a href="https://www.flickr.com/mail/write/?to={{nsid}}" class="btn btn-primary">Send message on Flickr</a></p>
        {% if license_name %}
        <div class="mb-2"><strong>Current license:</strong> <span class="badge {{ 'bg-success' if license_code in [4, 5, 7, 8, 9, 10, 14, 15] else 'bg-warning text-dark' if license_code in [1, 2, 3, 6, 11, 12, 13, 16] else 'bg-secondary' }}">{{ license_name }}</span></div>
        {% endif %}
        <div class="mb-2"><strong>Subject:</strong> {{ subject }} <button class="btn btn-sm btn-outline-secondary" id="copy-subject">copy</button></div>
        <div>
          <h5>Message <button class="btn btn-sm btn-outline-secondary" id="copy-message">copy</button></h5>
          {% for p in lines %}
          <p>{{ p }}</p>
          {% endfor %}
        </div>
        {% endif %}
        <p class="mt-3">
          <a href="{{ url_for('start', enwp=enwp, cat=cat, flickr_search=flickr_search) }}">&larr; Back to search results</a>
        </p>
      </div>
    </div>
    {% endif %}

    <div class="mt-3">Written by <a href="/">Edward Betts</a>. Source code and bug reports: <a href="https://git.4angle.com/edward/flickr-mail">https://git.4angle.com/edward/flickr-mail</div>

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

{% block scripts %}
{% if subject and lines %}
<script>
  var copy_subject = document.getElementById("copy-subject");
  var copy_message = document.getElementById("copy-message");
  var subject = {{ subject | tojson }};
  var message = {{ "\n\n".join(lines) | tojson }};

  copy_subject.addEventListener("click", function(e) {
    navigator.clipboard.writeText(subject);
  });

  copy_message.addEventListener("click", function(e) {
    navigator.clipboard.writeText(message);
  });

</script>
{% endif %}
{% endblock %}