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

{% block title %}{% trans 'Check e-mail or openid' %}{% endblock title %}

{% block content %}

<h1>{% trans 'Check e-mail or openid' %}</h1>

<div style="max-width:600px;">
<form method="post" name="check">{% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
      <button type="submit" class="btn btn-primary">{% trans 'Check' %}</button>
      <button type="cancel" class="btn btn-danger">{% trans 'Cancel' %}</button>
  {% endbuttons %}
</form>
</div>

{% if mailurl or openidurl %}
    <p>
      This is what the avatars will look like depending on the hash and protocol you use:<br/>

      <div class="d-none d-lg-block">
        {% if mail_hash %}
          MD5 hash (mail): {{ mail_hash }}<br/>
          SHA256 hash (mail): {{ mail_hash256 }}<br/>
        {% endif %}

        {% if openid_hash %}
          SHA256 hash (OpenID): {{ openid_hash }}<br/>
        {% endif %}
      </div>
    </p>

    <ul class="horizontal-list avatar-list centered" style="font-size:smaller;">
      {% if mailurl %}
        <li>
          <div style="float:left;">
            <a href="{{ mailurl_secure }}">
              <img src="{{ mailurl_secure }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
            </a>
            <div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
              <i class="fa fa-unlock" title="Secure connection (https)"></i>
              <br/>
              <i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
            </div>
          </div>
          <br/>MD5
        </li>
        <li>
          <div style="float:left;">
            <a href="{{ SECURE_BASE_URL }}{{ mail_hash256 }}?s={{ size }}">
              <img src="{{ SECURE_BASE_URL }}{{ mail_hash256 }}?s={{ size }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
            </a>
            <div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
              <i class="fa fa-unlock" title="Secure connection (https)"></i>
              <br/>
              <i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
            </div>
          </div>
          <br/>SHA256
        </li>
      {% endif %}

      {% if openidurl %}
        <li>
          <div style="float:left;">
            <a href="{{ openidurl_secure }}">
              <img src="{{ openidurl_secure }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
            </a>
            <div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px">
              <i class="fa fa-unlock" title="Secure connection (http)"></i>
              <br/>
              <i class="fa fa-openid" title="openid: {{ form.openid.value }}"></i>
            </div>
          </div>
          <br/>SHA256
        </li>
      {% endif %}
    </ul>
{% endif %}

{# Bad hack in order to have the images for sure inside our "outer" div box #}
<!-- Bad hack -->
{% if mailurl %}
<div style="height: {{ size }}px;">&nbsp;</div>
{% endif %}
{% if openidurl %}
<div style="height: {{ size }}px;">&nbsp;</div>
{% endif %}
<!-- End of bad hack -->

{% endblock content %}
