{% assign slug = image.name | strip_extension | slugify %}
{% assign safe_name = image.name | uri_escape %}
{% assign next_index = forloop.index0 | plus: 1 %}
{% assign previous_index = forloop.index0 | minus: 1 %}

{% capture image_path %}photos/original/{{ image.name }}{% endcapture %}

{% if slug == page.image_slug %}
    {% assign target = "target" %}
{% else %}
    {% assign target = "" %}
{% endif %}

<li class="item {{ target }}" id="id-{{ slug }}" style="background-image: url('{{ safe_name | processed_path: 'tint' }}')" title="{{ image.name | strip_extension }}">

    <img class="lazyload" data-src="{{ safe_name | processed_path: 'thumbnail' }}" src="{{ safe_name | processed_path: 'tint' }}" height="{{ image_path | exif: 'height'}}" width="{{ image_path | exif: 'width'}}" />
    <span class="full">
        <span style="background-image: url('{{ safe_name | processed_path: 'large' }}')"></span>
    </span>
    <a class="open" href="{{ slug | relative_url  }}" data-target="id-{{ slug }}">Open</a>
    <a class="close" href="{{ '/' | relative_url }}">Close</a>
    {% unless forloop.first %}
        {% assign previous_slug = images[previous_index].name | strip_extension | slugify %}
        <a href="{{ previous_slug | relative_url }}" data-target="id-{{ previous_slug }}" class="previous" title="Go to previous photo">
            <span>Previous</span>
        </a>
    {% endunless %}

    {% unless forloop.last %}
        {% assign next_slug = images[next_index].name | strip_extension | slugify %}
        <a href="{{ next_slug | relative_url }}" data-target="id-{{ next_slug }}" class="next" title="Go to next photo">
            <span>Next</span>
        </a>
    {% endunless %}
    <ul class="links top photodetail-links">
        {% if site.env.ALLOW_IMAGE_SHARING == "1" %}
            <li class="share"><a onClick="shareImage('{{ image.basename }}','{{ slug | relative_url }}');" title="Share this photo">Share</a></li>
        {% endif %}
        {% if site.env.ALLOW_ORIGINAL_DOWNLOAD == "1" %}
            <li class="download"><a href="{{ image.path }}" download="{{ safe_name }}" class="" title="Download this image">Download</a></li>
        {% endif %}
    </ul>

    <ul class="meta">
        <!--
        <li>{{ image_path | exif: 'model'}}</li>
        <li>{{ image_path | exif: 'exposure_time'}}</li>
        <li><span class="aperture"><em>f</em>/</span>{{ image_path | exif: 'aperture_value'}}</li>
        -->
        {% if site.env.ALLOW_IMAGE_SHARING == "1" %}
            <li><a onClick="shareImage('{{ image.basename }}', '{{ slug | relative_url }}')" class="gridview-button share" title="Share this image">Share</a></li>
        {% endif %}
        {% if site.env.ALLOW_ORIGINAL_DOWNLOAD == "1" %}
            <li><a href="{{ image.path }}" download="{{ safe_name }}" class="gridview-button download" title="Download this image">Download</a></li>
        {% endif %}
    </ul>
</li>