{% extends "_base.html" %}

{% block page_title %}{{ super() }} | Portfolio | {{ this.name }}{% endblock %}

{% set images_number = this.attachments.images.count() %}

{% block main_content %}
  <div class="center">
    <h1>{{ this.name }}</h1>

    <ul>
      {% if this.date %}<li><strong>Date:</strong> {{ this.date.year }}</li>{% endif %}
      {% if this.role %}<li><strong>Role:</strong> {{ this.role }}</li>{% endif %}
      {% if this.stack %}<li><strong>Stack:</strong> {{ this.stack }}</li>{% endif %}
      {% if this.company %}<li><strong>Company:</strong> {{ this.company }}</li>{% endif %}
      {% if this.url %}<li><strong>URL:</strong> <a href="{{ this.url }}">{{ this.url }}</a></li>{% endif %}
    </ul>

    <p>{{ this.description }}</p>

    {% if images_number > 0 %}
    <div class="grid grid-pad" data-featherlight-gallery data-featherlight-filter="a">
      {% for image in this.attachments.images %}
        <div class="col-1-8">
          <a href="{{ image|url }}">
            <img src="{{ image.thumbnail(200, 150, crop=True)|url }}">
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
{% endblock %}

{% block endhead %}
  {% if images_number > 0 %}
    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.2/release/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.2/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
  {% endif %}
{% endblock %}

{% block endbody %}
  {% if images_number > 0 %}
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.7.2/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
  {% endif %}
{% endblock %}