{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}{% endblock title %}

{% block content %}
<h1>{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}</h1>

{% if user.photo_set.count %}
  <p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}</p>
  <div class="photo-grid">
    {% for photo in user.photo_set.all %}
      <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
        <input type="hidden" name="photo_id" value="{{ photo.id }}">
        <button type="submit" name="photo{{ photo.id }}" class="nobutton">
          <div class="panel panel-tortin">
            <div class="panel-heading">
              <h3 class="panel-title">{% if email.photo.id == photo.id %}<i class="fa-solid fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
            </div>
            <div class="panel-body" style="height:130px">
              <center>
                <img style="max-height:100px;max-width:100px" src="{% url 'raw_image' photo.id %}">
              </center>
            </div>
          </div>
        </button>
      </form>
    {% endfor %}
  </div>
{% endif %}

<div class="photo-grid">
  <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
    <button type="submit" name="photoNone" class="nobutton">
      <div class="panel panel-tortin">
        <div class="panel-heading">
          <h3 class="panel-title">{% if email.photo.id == photo.id %}{% if not email.bluesky_handle %}<i class="fa-solid fa-check"></i>{% endif %}{% endif %} {% trans 'No image' %}</h3>
        </div>
        <div class="panel-body" style="height:130px">
              <center>
                  <img style="max-height:100px;max-width:100px" src="/static/img/nobody/100.png">
              </center>
        </div>
      </div>
    </button>
  </form>
  {% if email.bluesky_handle %}
  <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
    <input type="hidden" name="photo_id" value="bluesky">
    <button type="submit" name="photoBluesky" class="nobutton">
      <div class="panel panel-tortin">
        <div class="panel-heading">
          <h3 class="panel-title">{% if email.bluesky_handle %}<i class="fa-solid fa-check"></i>{% endif %} {% trans "Bluesky" %}</h3>
        </div>
        <div class="panel-body" style="height:130px">
          <center>
            <img style="max-height:100px;max-width:100px" src="{% url "blueskyproxy" email.digest %}?size=100">
          </center>
        </div>
      </div>
    </button>
  </form>
  {% endif %}
</div>

<div class="action-buttons">
  <a href="{% url 'upload_photo' %}" class="btn btn-primary">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
  <a href="{% url 'import_photo' %}" class="btn btn-secondary">{% blocktrans %}Import from other services{% endblocktrans %}</a>
</div>

<div style="margin-top: 2rem;">
  <form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post">{% csrf_token %}
    <div class="form-group">
      <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
      {% if email.bluesky_handle %}
        <input type="text" name="bluesky_handle" required value="{{ email.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
      {% else %}
        <input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
      {% endif %}
    </div>
    <button type="submit" class="btn btn-primary">{% trans 'Assign Bluesky handle' %}</button>
  </form>
</div>
{% endblock content %}