{% extends "base.html" %}

{% block js %}
    // Do left/right navigation on keypresses
    document.onkeydown = function(event) {
        if (event.key == "ArrowLeft") {
            {% if prev_image %}
            location.href = "{{prev_image.html_filename}}";
            {% endif %}
        } else if (event.key == "ArrowRight") {
            {% if next_image %}
            location.href = "{{next_image.html_filename}}";
            {% endif %}
        }
    }
{% endblock %}

{% block content %}
<div id="photo">
    <img src="{{image.screen_filename}}" />
</div>

<div id="nav">
    <div>
        {% if prev_image %}
            <a href="{{prev_image.html_filename}}">
                <i class="arrow arrow-left"></i>
            </a>
        {% endif %}
    </div>
    <div>
        <a href="..">
            <i class="arrow arrow-up"></i>
        </a>
    </div>
    <div>
        {% if next_image %}
            <a href="{{next_image.html_filename}}">
                <i class="arrow arrow-right"></i>
            </a>
        {% endif %}
    </div>
</div>

<div id="photo-description" class="caption">
    {% if image.description %}
    {{ image.description | safe }}
    {% endif %}
</div>

<div id="download">
    <a href="../{{image.filename}}">view full size</a>
</div>
{% endblock %}