<div class="index-archive index1">
  <h3 class="index-title">
    <span>{{page-title}}</span>
  </h3>
  <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <i class="fa fa-th-list"></i>
          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed">
            {{category-title}}
          </a>
        </h4>
      </div>
      <div id="collapse" class="panel-collapse collapse">
        <div class="panel-body">
          <dl class="dl-horizontal index-archive-item-group" data-list="archives" data-level="1">
            <dt class="index-archive-item-list">
              <sapn class="index-archive-item-title">{{archive-title}}</span>
              <span data-list="statuses" data-level="2">
                <span class="label status {{status-class}}">{{status}}</span>
              </span>
            </dt>
            <dl class="index-archives-files-list" data-list="files"  data-level="2">
              <dd>
                <a href="{{file-url}}" class="index-archives-files-item" target="_blank">{{file-name}}</a>
                <span class="label label-primary">{{file-type}}</span>
              </dd>
            </dl>
          </dl>
        </div>
      </div>
    </div>
        {{link_to_edit}}
  </div>
</div>
<script>
  (function(){
    for (var i = 0; i < $('.index-archive.index1 .panel-title').length; i++) {
      $('.index-archive.index1 .panel-title:eq(' + i + ') .collapsed').attr('href', '#collapse' + i);
      $('.index-archive.index1 .panel-collapse:eq(' + i + ')').attr('id', 'collapse' + i);
    }
  }());
</script>