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

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