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

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

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
    <link rel="stylesheet" href="{{ theme.url }}/css/style.min.css">
    <!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">

      <div class="four columns">
        <div class="sidebar">
          <h1><a href="{{ 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 breadcumb %}
          <h2>
            {%- for url, title in breadcumb -%}
            <a href="{{ url }}">{{ title }}</a>
            {%- if not loop.last %} » {% endif -%}
            {% endfor -%}
          </h2>
          <hr>
          {% endif %}
        </header>

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

        {% if images %}
        <div id="gallery" class="row">
          {% for image in images %}
          <div class="four columns thumbnail
                      {% if loop.index % 3 == 1 %}alpha{% endif%}
                      {% if loop.index % 3 == 0 %}omega{% endif%}">
            <a href="{{ image.file }}" class="gallery" title="{{ image.file }}">
              <img src="{{ image.thumb }}" alt="{{ image.file }}"
                   title="{{ image.file }}" /></a>
          </div>
          {% endfor %}
        </div>
        {% endif %}

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

    {% if images %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-1.8.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
      });
    </script>
    {% endif %}
    {% include 'analytics.html' %}
  </body>
</html>
