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

{% block title %}{% trans 'Import photo' %} - Libravatar{% endblock title %}

{% block content %}
<style>
  input[type=checkbox] {display:none}
  input[type=checkbox] + label:before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    display: inline-block;
  }
  input[type=checkbox] + label:before {content: "\f0c8"}
  input[type=checkbox] + label:before {letter-spacing: 5px}
  input[type=checkbox]:checked + label:before {content: "\f14a"}
  input[type=checkbox]:checked + label:before {letter-spacing: 3px}
</style>
<h1>{% trans 'Import photo' %}</h1>

{% if not email_id %}
  <div style="max-width:640px">
    <form action="{% url 'import_photo' %}" method="get" id="check_mail_form">
      <div class="form-group">
        <label for="check_email_addr">{% trans 'Email Address' %}</label>
        <input type="text" name="check_email_addr" class="form-control" value="{{ email_addr }}">
      </div>
      <div class="form-group">
        <button type="submit" class="button">{% trans 'Check' %}</button>
      </div>
    </form>
    <script>
      document.getElementById('check_mail_form').onsubmit =
        function(self) {
          window.location.href = "{% url 'import_photo' %}" + document.getElementsByName('check_email_addr')[0].value;
          return false;
      };
    </script>
  </div>
{% endif %}

{% include '_import_photo_form.html' %}
<div style="height:40px"></div>
{% endblock content %}
