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

{% block title %}{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}{% endblock title %}

{% block content %}
<h1>{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_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 openid address:' %}</p>
  <div class="photo-grid">
  {% for photo in user.photo_set.all %}
  <form action="{% url 'assign_photo_openid' view.kwargs.openid_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 openid.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_openid' view.kwargs.openid_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 not openid.photo and not openid.bluesky_handle %}<i class="fa-solid fa-check"></i>{% 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 openid.bluesky_handle %}
  <form action="" class="photo-card">
    <div class="panel panel-tortin">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa-solid fa-check"></i> {% trans "Bluesky" %}</h3>
      </div>
      <div class="panel-body" style="height:130px">
            <center>
                <img style="max-height:100px;max-width:100px" src="{% url "blueskyproxy" openid.digest %}?size=100">
            </center>
      </div>
    </div>
  </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_openid' view.kwargs.openid_id %}" method="post">{% csrf_token %}
    <div class="form-group">
      <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
      {% if openid.bluesky_handle %}
        <input type="text" name="bluesky_handle" required value="{{ openid.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 %}