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

{% block title %}{% trans 'Upload a new photo' %}{% endblock title %}

{% block header %}<link rel="prefetch" href="{% static 'css/jcrop.css' %}">
<link rel="prefetch" href="{% static '/js/jcrop.js' %}">{% endblock header %}

{% block content %}
  <h1>{% trans 'Upload a new photo' %}</h1>

  <form enctype="multipart/form-data" action="{% url 'upload_photo' %}" method="post">{% csrf_token %}
    {% if email %}<input type="hidden" name="email" value="{{ email }}">{% endif %}
    {% if openid %}<input type="hidden" name="openid" value="{{ openid }}">{% endif %}

{% if form.photo.errors %}
<div class="alert alert-danger" role="alert">{{ form.photo.errors }}</div>
{% endif %}
<div class="form-group">
<label for="id_photo">{% trans 'Photo' %}:</label>
<span class="button uploadbtn" style="display:flex;width:14rem;padding:0;height:36px;position:relative;align-items:center">
<input type="file" name="photo" required id="id_photo" accept="image/*" style="opacity:0;width:100%;height:100%;float:left">
<label for="id_photo">{% trans 'Select Photo' %}</label>
</span>
</div>
    {% blocktrans with max_file_size|filesizeformat as max_size %}Maximum file size of {{ max_size }}.{% endblocktrans %}</p>

<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="not_porn" checked required id="id_not_porn">
<label for="id_not_porn"><b>{% trans 'required' %}</b>; {% trans 'suitable for all ages (i.e. no offensive content)' %}</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="can_distribute" checked required id="id_can_distribute">
<label for="id_can_distribute"><b>{% trans 'required' %}</b>; {% trans 'can be freely copied' %}</label>
</div>
</div>
      <button type="submit" class="button">{% trans 'Upload' %}</button>
  </form>
<div style="height:40px"></div>
{% endblock content %}