{% extends "base.html" %}
{% load wagtailimages_tags i18n %}

{% block content %}
<h1 class="heading heading--personae">{% trans "Are you a ..." %}</h1>
<div class="personae">
    <ul class="personae-list">
        {% for persona in persona_pages %}
          <li class="personae-list__item">
            <a href="{% url 'molo.usermetadata:set_persona' persona.slug %}?next={{ next }}" class="personae__title">
              <div class="personae-list__item--image-container">{% if persona.image %}
                {% image persona.image width-65 as tmp_photo %}
                  <img src="{{ tmp_photo.url }}" alt="{{ persona.image.title }}" class="personae__image" />
                {% endif %}
              </div>
              {{ persona.title }}
            </a>
          </li>
        {% endfor %}
    </ul>
    <a href="{% url 'molo.usermetadata:skip_persona'%}?next={{ next }}" class="personae__skip">{% trans "Skip" %}</a>
</div>
{% endblock %}
{% block section_menu %}
{% endblock %}

{% block search %}
{% endblock %}

{% block footer %}
  <div class="copyright">
    <p>&copy; The Internet of Good Things</p>
  </div>
{% endblock %}