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

{% block title %}{% trans 'Choose items to be uploaded' %}{% endblock title %}

{% block content %}
<style>
input[type=checkbox] {display:none}
input[type=checkbox].image + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox].image + label:before {content: "\f096"}
input[type=checkbox].image + label:before {letter-spacing: 5px}
input[type=checkbox].image:checked + label:before {content: "\f046"}
input[type=checkbox].image:checked + label:before {letter-spacing: 3px}
</style>
  <h1>{% trans 'Choose items to be imported' %}</h1>

    <form method="post" action="{% url 'upload_export' 'save' %}">{% csrf_token %}
      {% if emails %}
        <h4>{% trans 'Email addresses we found in the export - existing ones will not be re-added' %}</h4>
        {% for email in emails %}
        <div class="checkbox">
          <input type="checkbox" checked name="email_{{ forloop.counter }}" id="email_{{ forloop.counter }}" value="{{ email.email }}" class="text"><label for="email_{{ forloop.counter }}">{{ email.email }}</label>
          </div>
        {% endfor %}
      {% endif %}
      {% if photos %}
          <h4>{% trans 'Photos we found in the export' %}</h4>
<div class="row">
        {% for photo in photos %}
<div class="panel panel-tortin" style="width:132px;float:left;margin-left:20px">
  <div class="panel-heading">
    <h3 class="panel-title">
        <input type="checkbox" checked name="photo_{{ forloop.counter }}" id="photo_{{ forloop.counter }}" value="{{ photo.data }}" class="image">
<label for="photo_{{ forloop.counter }}">{% trans 'Image' %} {{ forloop.counter }}</label>
</label>
</h3></div>
  <div class="panel-body">
        <center>
            <img style="max-height:100px;max-width:100px" src="data:image/{{ photo.format }};base64,{{ photo.data }}">
        </center>
</div>
</div>
        {% endfor %}
</div>
      {% endif %}
<p>
        <button type="submit" class="button">{% trans 'Upload' %}</button>
</p>
    </form>
<div style="height:40px"></div>
{% endblock content %}