{% extends "blog/base.html" %}

{% block title %}
  <title>loopvid blog gallery</title>
{% endblock %}

{% block extra_sheets %}
  <link rel="stylesheet" type="text/css" href="/stylesheets/gallery.css" />
{% endblock %}

{% block extra_scripts %}
  <script type="text/javascript" src="/scripts/gallery.js"></script>
  {# don't play inline if no_video #}
  {% if not add_no_video %}<script type="text/javascript" src="/scripts/play_inline.js"></script>{% endif %}
{% endblock %}

{% block body %}
  <body class="blog gallery">
{% endblock %}

{% block page %}
  <div class="page thumbnail_gallery">
    {% for entry in entries %}
      <div class="show_child thumbnail_container">
        <div class="thumbnail_wrapper">
          <a href="/{{ entry['name'] | e }}{% if add_no_video %}?no_video=y{% endif %}"
            {% if (not add_no_video) and entry['urls'] %}
              data-name="{{ entry['name'] | e }}"
              data-sources="{{ ' '.join(entry['urls']) | e }}"
              data-viewed="false"
              data-has_audio="{% if entry['has_audio'] %}true{% else %}false{% endif %}"
            {% endif %}
            data-name="{{ entry['name'] | e }}"
            class="thumbnail_link"
            id="{{ entry['name'] | e }}_thumb">
              <img class="thumbnail" src="{{ entry['img'] | e }}" alt="{{ entry['name'] | e }}" />
          </a>
          {% if entry['has_audio'] %}
            <img class="overlay_image" src="/images/loudspeaker.png" alt="audio" />
          {% endif %}
        </div>
        <div class="video_info tooltip hidden go_left" id="{{ entry['name'] | e }}_info">

          <a class="controls_link small"
            href="/#{{ entry['name'] | e }}"
            title="expanded video with controls"
            >
            expand
          </a>

          <div class="name">
            <a href="/{{ entry['name'] | e }}{% if add_no_video %}?no_video=y{% endif %}">{{ entry['name'] }}</a>
            {% if page_links and ('admin' in page_links) and page_links['admin'] %}
              <span class="small">
                <a class="smaller"
                  href="/blog/admin?names={{ entry['name'] | urlquote_name | e }}"
                  title"edit this entry only">
                    (admin)
                </a>
              </span>
            {% endif %}
          </div>

          {% if entry['source_text'] or entry['source_url'] %}
            <div class="source small">
              source:
              {% if entry['source_url'] %}
                <a class="source_link" rel="noreferrer" href="{{ entry['source_url'] | e }}">
                  {% if entry['source_text'] %}
                    {{ entry['source_text'] | e }}
                  {% else %}
                    {{ entry['source_url'] | e }}
                  {% endif %}
                </a>
              {% elif entry['source_text'] %}
                <span class="source_text">{{ entry['source_text'] | e }}</span>
              {% endif %}

              {% if entry['source_shortlink'] %}
                <a class="smaller" href="/blog/{{ entry['source_shortlink'] }}" title="more videos from this source">
                  (videos)
                </a>
              {% endif %}
            </div>
          {% endif %}

          {% if entry['tags'] %}
            <div class="tags small">
              tagged:
              {% for tag in entry['tags'] %}
                <a class="tag_link" href="/blog/gallery/tag/{{ tag | e }}">{{ tag | e }}</a>
              {% endfor %}
            </div>
          {% endif %}

          <div class="posted_at small">
            posted at: <span class="time">{{ entry['posted_at'] | short_time }}</span>
          </div>

          {% if 'views' in entry %}
            <div class="views small">
              views:
              <span class="view_count" data-count="{{ entry['views'] }}">{{ entry['views'] }}</span>
            </div>
          {% endif %}
        </div>
      </div>

    {% endfor %}
    {% if not entries %}
      <p class="no_videos_message">Sorry, but we couldn't find what you were looking for. :(</p>
    {% endif %}

  </div>
{% endblock %}

{% block cover %}
  <div class="cover_outer hidden" id="cover">
    <div class="cover_inner" id="cover_inner">
      <div class="buttons" id="cover_buttons">
        <div class="buttons_left">
          <a href="#" class="prev_button cover_button" id="cover_prev_button">&lt;</a>
          {#- can't leave any spaces here -#}
          <a href="#" class="next_button cover_button" id="cover_next_button">&gt;</a>
          <span id="cover_video_count"></span>
        </div>
        {#- can't leave any spaces here -#}
        <div class="buttons_right">
          <a href="#" class="close_button cover_button" id="cover_close_button">x</a>
        </div>
      </div>
      <div class="video_frame" id="cover_video_frame"></div>
      <div class="video_info" id="cover_video_info"></div>
    </div>
  </div>
  <div id="failed_to_load_info_template" class="failed_to_load_info hidden">
    <div class="wrapper">
      <p>It seems that the video isn't loading. Possible reasons are that your browser does not support this video type or the video might just be temporarily unavailable.</p>
      <p>These are the direct links we tried:</p>
      <ul class="sources_list"></ul>
      <p><a class="video_reloader" href="#">Try to reload the video</a></p>
    </div>
  </div>

  {# elements for communicating a initial state to the page's javascript #}
  {% if autoplay %}
    <div class="hidden"
      id="autoplay"
      {% if autoplay_video %}
        data-video="{{ autoplay_video | e }}"
      {% endif %}
      {% if new_location %}
        data-location="{{ new_location | e }}"
      {% endif %}
    />
  {% endif %}
{% endblock %}
