{% extends 'base.html.twig' %}

{% block title %}{{photos['title']}} - Photography | Alex Daniels{% endblock %}

{% block metatitle %}{{photos['title']}} | Alex Daniels {% endblock %}
{% block ogtitle %}{{photos['title']}} | Alex Daniels {% endblock %}
{% block twittertitle %}{{photos['title']}} | Alex Daniels{% endblock %}
{% block metadescription %}{{photos['description']}} {% endblock %}
{% block ogdescription %}{{photos['description']}} {% endblock %}
{% block twitterdescription %}{{photos['description'] }} {% endblock %}
{% block ogimage %}{{ photos['thumbnail']}}{% endblock %}
{% block twitterimage %}{{ photos['thumbnail']}}{% endblock %}

{% block body %}
    <article id="album">
        <h2 class="title">{{photos['title']}}</h2>
        <div class="meta">
            <p>{{ photos['date']|date('l M d Y')}}</p>
            <p>Filed Under: <a href="/categories/{{photos['urlSafeCategory']}}">{{photos['category']}}</a></p>
        </div>
        <div class="text">
            {{ photos['text']|raw }}
        </div>
        <ul class="photos">
        {% for photo in photos['uploads'] %}
            <li class="photo" data-equipment="{{photo['equipment']}}" data-location="{{photo['location']}}" data-caption="{{photo['caption']}}" data-date="{{photo['date']|date('l M d Y')}}" data-url="{{asset(photo['file'])}}" data-alt="{{photo['alt']}}">
                <img src="{{asset(photo['file'])}}" alt="{{photo['alt']}}">
            </li>
        {% endfor %}
        </ul>
    </article>
    <div id="open-image">
        <span class="close">X</span>
        <img src="" alt="" id="image">
        <div id="details">
            <p id="caption"></p>
            <p id="date"></p>
            <p id="location"></p>
            <p id="equipment"></p>
        </div>
    </div>
{% endblock body %}