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

{% block title %}IRIS - Submissions - Snapshots{% endblock %}

{% block content %}
<style>
  li {list-style-type: none;}
  .right-triangle{
    margin-right: 0.5em;
    margin-top: 0.2em;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #428bca;
  }
  .down-triangle {
    margin-right: 0.5em;
    margin-top: 0.2em;
    clear:none;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #428bca;
  }
</style>

<div class="container">
  {% include "submissions/menu.html" %}

  <div class="row page-header">
    <h3>Snapshots for {{ product.name }}</h3>
  </div>

  <ul id="submission_list">
    {% include "submissions/read/multiple/snapshot_submissions.html" %}
  </ul>
  {% if more_data %}
  <p align="right" id="showmorecontainer">
    <a id="showmore" href="#">show more</a>
  </p>
  {% endif %}
</div>
<script type="text/javascript">
    function add_toggle_submissions_event(){
      $('#submission_list > li > div').each(function(index){
        $(this).unbind('click').click(function(){
            classname = $(this).attr("class");
            if (classname == "down-triangle"){
                $(this).attr("class", "right-triangle");
            }else{
                $(this).attr("class", "down-triangle");
            }
            $(this).siblings("ul").toggle();
       });
    });
  }

limit = 10;
offset = limit;
product_id = "{{ product.id }}"
$(document ).ready(function() {
    $("#showmore").click(function(){
        var url = '/app/submissions/snapshots/product/' + product_id + '/' + offset + '/' + limit;
        var outter = $(this);
        $.get(url, function(data, textStatus, jqXHR) {
            $("#submission_list" ).append(data);
            add_toggle_submissions_event();
            offset = $('#submission_list > li').length;
            if (jqXHR.getResponseHeader('X-No-More') == "False"){
                outter.hide();
            }
        });
        return false;
    });
    add_toggle_submissions_event();
})
</script>
{% endblock %}