{% extends "base.html" %}

{% load staticfiles %}
{% load cache %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}

{% block breadcrumbs %}{% endblock breadcrumbs %}

{% block extra_head_bottom %}
<link href="{% static "wagtailgridder/css/grid_index_page.css" %}" rel="stylesheet" type="text/css">
{% endblock extra_head_bottom %}

{% block inner_content %}
    {% cache 3600 "wagtailgridder-" request.path request.user.is_staff request.user.is_faculty %}
        <div id="main-body" class="main-section">
          <div class="container">
              <br>
              {% if page.hero_background_image %}
                  <div class="row m-top-30">
                    {% image page.hero_background_image original as top_hero %}
                    <div class="top-hero" style="background-image:url('{{ top_hero.url }}');">
                      <div class="col-lg-6 col-md-6 hero-wrap">
                        <div class="hero-details">

                          {% image page.hero_logo_image original %} 
                          <p class="m-bottom30" style="color:#fff;">{{ page.hero_description }}<p><a href="#grid-items" class="btn btn-info" style="color:#fff; text-decoration:none;">{{ page.hero_button_text }}</a></p>
                          
                        </div>
                      </div>
                    </div>
                  </div>
              {% endif %}

              {% if page.featured_description and page.featured_grid_item_1 and page.featured_grid_item_2 %}
                  <div class="row">
                    <div class="col-lg-6 col-md-6 hero-wrap">                  
                        <p class="lead m-top15">{{ page.featured_description }}</p>
                    </div>
                    <div class="col-lg-6 col-md-6">
                      <div class="row">
                        <div class="col-md-12 m-top15">
                            <div class="feat"><strong>FEATURED</strong></div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-lg-6 col-md-6">
                          <a href="{{ page.featured_grid_item_1.url }}" class="cr-link">
                            <div class="cr-img bg-img"> <img src="{{ page.featured_grid_item_1.summary_image.file.url }}" width="100%" />
                            </div>
                            <span>{{ page.featured_grid_item_1.title }} <i class="fa fa-angle-double-right"></i></span>
                          </a>
                        </div>
                        <div class="col-lg-6 col-md-6">
                          <a href="{{ page.featured_grid_item_2.url }}" class="cr-link" target="_blank">
                            <div class="cr-img bg-img" ><img src="{{ page.featured_grid_item_2.summary_image.file.url }}" width="100%" />
                            </div>
                            <span>{{ page.featured_grid_item_2.title }} <i class="fa fa-angle-double-right"></i></span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
              {% endif %}

              <a name="grid-items"></a>
              <div class="catalog-tools">
                  <div class="main-section" >
                      {# Only display categories bar if there is more than one category to show. #}
                      {% if page.categories|length > 1 %}
                          <div class="row">
                              <div class="col-md-12">
                                  <div class="filter-wrap pull-right">
                                      <p class="filter-label">By Topic:</p>
                                      <div class="filter-options btn-group">
                                        <button class="btn btn-info filter active" data-filter="all">All Topics</button>
                                        {% for category in page.categories %}
                                        <button class="btn btn-info filter" id="id-{{ category|slugify }}" data-filter=".{{ category|slugify }}">{{ category }}</button>
                                        {% endfor %}
                                      </div>
                                  </div>
                              </div>
                          </div>
                      {% endif %}

                      <div id="grid-container" class="gridder">
                          {% for grid_item in page.grid_items %}
                              <div class="{% for item in grid_item.categories.all %}{{ item.name|slugify }} {% endfor %}gridder-list" data-cat="{% for item in grid_item.categories.all %}{{ item.name|slugify }} {% endfor %}" data-griddercontent="#{{ grid_item.slug }}" id="id-{{ grid_item.slug }}">
                                  <div class="gl-wrap">
                                      <img src="{{ grid_item.summary_image.file.url }}" class="tool-img">
                                      <div class="tool-body">
                                          <a name="a-{{ grid_item.slug }}" id="a-{{ grid_item.slug }}"></a>
                                          <div class="tool-title"><strong>{{ grid_item.title }}</strong></div>
                                          <p>
                                          {{ grid_item.summary_text|safe }}
                                          {% block extra_summary_text %}{% endblock extra_summary_text %}
                                          </p>
                                          {% if grid_item.tags.count %}
                                              <p>Tags: {% for tag in grid_item.tags.all %}{{ tag }}{% endfor %}</p>
                                          {% endif %}
                                        </div>
                                      <button class="btn btn-primary btn-block">More &rarr;</i></button>
                                  </div>
                              </div>
                          {% endfor %}
                      </div>
                  </div>
              </div class="catalog-tools">
          </div class="container">

          {% for grid_item in page.grid_items %}
              <div id="{{ grid_item.slug }}" class="gridder-content">
                  <div class="row">
                      <div class="detail-img">
                          <div class="content-img" style="background-image:url({{ grid_item.description_image.file.url }});"></div>
                      </div>
                      <div class="detail-content">
                          <div class="content-title"><strong>{{ grid_item.title }}</strong></div>
                          <p>{{ grid_item.description_text|safe }}</p>

                          {% block button_block %}
                              {% for button in grid_item.buttons %}
                                  {# Renders 'blocks/button_section.html' #}
                                  {{ button }}
                              {% endfor %}
                          {% endblock button_block %}
                      </div>
                  </div class="row">

                  {% if grid_item.description_video %}
                      <div class="row video-wrapper">
                          <iframe src="{{ grid_item.description_video }}" width="1920" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                      </div class="row">
                  {% endif %}

              </div>
          {% endfor %}
        </div id="main-body" class="main-section">
    {% endcache %}

    {% if request.GET.t %}
        <script>
        $(document).ready(function() {
            setTimeout(function() {
                $('#id-{{ request.GET.t }}').trigger('click');
            }, 10);
        });
        </script>
    {% endif %}
{% endblock inner_content %}

{% block extra_footer_js %}

<script src="{% static "wagtailgridder/js/jquery.gridder.min.js" %}"></script>
<script src="{% static "wagtailgridder/js/jquery.mixitup.min.js" %}"></script>

<script type="text/javascript">
  $(function() {
    var isPageLoaded = false;
    var locationHash = "";
      var layout = 'grid'; // Store the current layout as a variable
      var $container = $('#grid-container'); // Cache the MixItUp container

      $container.mixItUp({
        animation: {
          animateChangeLayout: true, // Animate the positions of targets as the layout changes
          animateResizeTargets: true, // Animate the width/height of targets as the layout changes
          effects: 'fade rotateX(-40deg) translateZ(-100px)'
        },

        selectors: {
          target: '.gridder-list', // Set up target for grid
          filter: '.filter' // Set target filter
        },

        layout: {
          containerClass: layout // Add the class 'grid' to the container on load
        },

        callbacks: {
          onMixEnd: function(state) {

            if ((!isPageLoaded) || (window.location.hash != locationHash)) {
              isPageLoaded = true;
              locationHash = window.location.hash;
              index_position = document.URL.indexOf("#");

              if (index_position != -1) {
                anchor_name = document.URL.substring(index_position);
                $(anchor_name).trigger("click");
              }
            }

          }
        }

      });

      // Call Gridder
      $('.gridder').gridderExpander({
        scroll: true,
        scrollOffset: 350,
        scrollTo: "panel", // panel or listitem
        animationSpeed: 600,
        animationEasing: "easeInOutExpo",
        onStart: function() {},
        onContent: function() {},
        onClosed: function() {}
      });

    });

  $(window).on('hashchange', function(e){
    document.location.href = document.URL;
    location.reload();
  });
</script>
{% endblock extra_footer_js %}
