{% extends "personas/base.html" %}

{% block content %}
{% if personas %}
<p>Here's a list of all available Personas.</p>
<p>If you have the Personas extension installed, just mouseover the
preview image for a Persona to preview it&mdash;when your mouse moves
away from the image, your original Persona will replace the preview.</p>
<p>If you like the Persona, you can click on the preview image to set it
as your current Persona.</p>
<p>Enjoy!</p>
<script>
function dispatchPersonaEvent(aType, aNode, aUrl) {
    if (aUrl) {
        /* TODO: We should only do this if the Persona is successfully
           set, i.e. if the user actually has Personas installed, etc. */
        /* TODO: We should probably just use a library like jQuery to
           do this for us. */
        var request = new XMLHttpRequest();
        /* TODO: Be reasonable and make this a POST, as this 'ping' will
           change the server's state. */
        request.open( "GET", aUrl, true );
        request.onreadystatechange = function() {}
        request.send(null);
    }

    var event = document.createEvent("Events");
    event.initEvent(aType, true, false);
    aNode.dispatchEvent(event);
}
</script>
{% for persona in personas %}
<div class="corner-box">
  <div onclick="dispatchPersonaEvent('SelectPersona',
                event.originalTarget,
                '{% url report-selection persona.id %}')"
       onmouseover="dispatchPersonaEvent('PreviewPersona',
                    event.originalTarget)"
       onmouseout="dispatchPersonaEvent('ResetPersona',
                   event.originalTarget)">
    <img persona="{{ persona.json_id }}"
         category="{{ persona.category.json_id }}"
         src="{{ persona.thumbnail_url }}" class="preview-image"
         alt="" />
  </div>
  <div class="persona-title">
    <h2 class="persona-name">{{ persona.name }}</h2>
    {% if persona.owner %}
    <span class="developer"> by
    {% if persona.owner.first_name %}
    {{ persona.owner.first_name }} {{ persona.owner.last_name }}
    {% else %}
    {{ persona.owner.email }}
    {% endif %}
    </span>
    {% endif %}
  </div>
  <div class="persona-desc">{{ persona.description|safe }}</div>
  {% if perms.personas.can_publish %}
  <a href="{% url django.contrib.admin.views.main.change_stage "personas","persona",persona.id %}">Edit</a>
  {% else %}
  {% ifequal persona.owner user %}
  <a href="{% url edit-persona persona.id %}">Edit</a>
  {% endifequal %}
  {% endif %}
</div>
{% endfor %}
{% else %}
<p>There are currently no personas available.</p>
{% endif %}
{% endblock %}