<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{{ album.title }}</title>
    <meta name="description" content="">
    <meta name="author" content="{{ author }}">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans">
    <link rel="stylesheet" href="{{ theme.url }}/css/style.min.css">
    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="four columns">
        <div class="sidebar">
          <h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
          {% if settings.links %}
          <nav id="menu">
            <ul>
              {% for title, link in settings.links %}
              <li><a href="{{ link }}">{{ title }}</a></li>
              {% endfor %}
            </ul>
          </nav>
          {% endif %}
          <footer>
            <p>{% if author %}&copy; {{ author }} - {% endif %}
              Generated by <a href="{{ sigal_link }}">sigal</a></p>
          </footer>
        </div>
      </div>

      <div id="main" role="main" class="twelve columns offset-by-four">
        <header>
          {% if album.breadcrumb %}
          <h2>
            {% for url, title in album.breadcrumb %}
            <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
            {% endfor -%}
          </h2>
          <hr>
          {% endif %}
        </header>

        {% set numbers = ["zero", "one", "two", "three", "four", "five", "six",
        "seven", "eight", "nine", "ten", "eleven", "twelve"] %}
        {% set column_size = settings.colorbox_column_size %}
        {% set nb_columns = (12 / column_size)|int %}
        {% set column_size_t = numbers[column_size] %}

        {% if album.albums %}
        {% for alb in album.albums %}
          {% if loop.index % nb_columns == 1 %}
          <div id="albums" class="row">
          {% endif%}
            <div class="{{ column_size_t }} columns thumbnail
                        {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                        {% if loop.index % nb_columns == 0 %}omega{% endif%}">
              <a href="{{ alb.url }}">
                <img src="{{ alb.thumbnail }}" class="album_thumb"
                    alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
              <span class="album_title">{{ alb.title }}</span>
            </div>
          {% if loop.last or loop.index % nb_columns == 0 %}
          </div>
          {% endif%}
        {% endfor %}
        {% endif %}

        {% if album.medias %}
          {% macro img_description(media) -%}
            {% if media.big %} data-big="{{ media.big }}"{% endif %}
            {% if media.exif %}
              {% if media.exif.datetime %}
                data-date=", {{ media.exif.datetime }}"
              {% endif %}
            {% endif %}
          {%- endmacro %}
        <div id="gallery" class="row">
          {% for media in album.medias %}
            {% if media.type == "image" %}
            <div class="{{ column_size_t }} columns thumbnail
                        {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                        {% if loop.index % nb_columns == 0 %}omega{% endif%}">
              <a href="{{ media.filename }}" class="gallery" title="{{ media.filename }}" {{ img_description(media) }}>
                <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
                    title="{{ media.title if media.title else media.filename }}" /></a>
            </div>
            {% endif %}
            {% if media.type == "video" %}
              <div class="{{ column_size_t }} columns thumbnail
                          {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                          {% if loop.index % nb_columns == 0 %}omega{% endif%}">
                <a href="#{{ media.filename|replace('.', '')|replace(' ', '') }}"
                  class="gallery" inline='yes' title="{{ media.filename }}"
                  {% if media.big %} data-big="{{ media.big }}"{% endif %}>
                  <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
                      title="{{ media.title if media.title else media.filename }}" /></a>
              </div>
              <!-- This contains the hidden content for the video -->
              <div style='display:none'>
                <div id="{{ media.filename|replace('.', '')|replace(' ', '') }}">
                  <video controls>
                  <source src='{{ media.filename }}' type='video/webm' />
                  </video>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
        {% endif %}

        {% if album.zip %}
        <div id="additionnal-infos" class="row">
          <p><a href="{{ album.zip }}"
              title="Download a zip archive with all images">Download ZIP</a></p>
        </div>
        {% endif %}

        {% if album.description %}
        <div id="description" class="row">
          {{ album.description }}
        </div>
        {% endif %}
      </div>
    </div>

    {% if album.medias %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-1.10.2.min.js"%3E%3C/script%3E'))</script>
    <script src="{{ theme.url }}/js/jquery.colorbox.min.js"></script>

    <script>
      $(".gallery").colorbox({
        rel:"gallery",
        transition:"none",
        maxWidth: "90%",
        maxHeight: "90%",
        scalePhotos: true,
        current: "{current} / {total}",
        title: function () {
          title = this.title;
          if(this.hasAttribute("data-big")) {
            title += " (full size)".link(this.getAttribute("data-big"));
          }
          if(this.hasAttribute("data-date")) {
            title += this.getAttribute("data-date");
          }
          return title;
        },
        inline: function() {
          return this.hasAttribute("inline");
        }
      });
    </script>
    {% endif %}
    {% include 'analytics.html' %}
  </body>
</html>
