{{ header }}
<div class="container gallery-photo">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }} mgallery-wrap {{ cursive_font ? 'mgallery-fonts' : '' }}">{{ content_top }}
      <h2>{{ heading_title }}</h2>
	    {% if gallerys %}
	    	<div class="row">
	        {% for gallery in gallerys %}
          {% if gallery.videos %}
	        <div class="col-sm-12">
            <h3 class="mheading_title">{{ gallery.title }}</h3>
            {% if display_description %}
              <div class="mgallery_info">
						    {{ gallery.top_description }}
              </div>
            {% endif %}
            <div class="mgallery lightgallery">
              {% for video in gallery.videos %}
                <div class="image-col" data-src="{{ video.link }}">
                  <div class="image-incol">
                    <div class="image">
                      <a title="{{ video.name }}"> <img src="{{ video.thumb }}"  title="{{ video.name }}" alt="{{ video.name }}" /></a>
                    </div>
                    <span class="mgallery-caption left-to-right">
                      {% if video.link %}
                      <h5><a href="{{ video.link }}">{{ video.name }}</a></h5>
                      {% else %}
                      <h5>{{ video.name }}</h5>
                      {% endif %}
                      <div class="mgallery-popup">
                        <a href=""><i class="enlarge-icon"></i></a>
                      </div>
                    </span>
                  </div>
                </div>
              {% endfor %}
            </div>
					</div>
	        {% endif %}
          {% endfor %}
	    	</div>
	    {% else %}
      <p class="text-center">{{ text_no_results }}</p>
      {% endif %}
    <br/>
    <div class="row">
      <div class="col-sm-6 text-left">{{ pagination }}</div>
      <div class="col-sm-6 text-right">{{ results }}</div>
    </div>
		{{ content_bottom }}</div>
  	{{ column_right }}</div>
<script type="text/javascript"><!--
  $(document).ready(function(){
    $('.lightgallery').lightGallery();
  });
//--></script>
</div>
<style type="text/css">
  {% if gallery_setting_color.title_text %}
    .mgallery-wrap h2{
      color: {{ gallery_setting_color.title_text }};
    }
  {% endif %}

  {% if gallery_setting_color.album_title_bg %}
    .mgallery-wrap .mheading_title{
      background: {{ gallery_setting_color.album_title_bg }};
    }
  {% endif %}

  {% if gallery_setting_color.albumtitle_text %}
    .mgallery-wrap .mheading_title{
      color: {{ gallery_setting_color.albumtitle_text }};
    }
  {% endif %}

  {% if gallery_setting_color.photo_hoverbg_color %}
    .mgallery .mgallery-caption{
      background: {{ gallery_setting_color.photo_hoverbg_color }};
    }
  {% endif %}

  {% if gallery_setting_color.photo_tilte_color %}
    .mgallery .image-col h5 a, .mgallery .image-col .mgallery-caption h5{
      color: {{ gallery_setting_color.photo_tilte_color }};
    }
  {% endif %}

  {% if gallery_setting_color.photo_zoomicon_color %}
    .mgallery .mgallery-caption .mgallery-popup i{
      color: {{ gallery_setting_color.photo_zoomicon_color }};
    }
  {% endif %}
</style>
{{ footer }}