{% 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" value="Submit">
    </form>

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

    <p>Wikipedia article: {{ name }}</p>
    <p>Select a photo to compose a message:</p>

    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-3">
      {% for photo in 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) }}">
            <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] else 'bg-secondary' }}">{{ photo.license_name }}</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

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

    {% elif name and not flickr_url %}

    <p>Wikipedia article: {{ name }}</p>
    <p class="text-warning">No photos found. Try a different search term.</p>
    <p><a href="https://flickr.com/search/?view_all=1&text={{ '"' + name + '"' | 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 %}
        <p><a href="https://www.flickr.com/mail/write/?to={{nsid}}" class="btn btn-primary">Send message on Flickr</a></p>
        <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>
      </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 %}