<div class="i-archive index-archive-2">
  <h1 class="i-archive-title">
    <span>{{page-title}}</span>
  </h1>
  <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">
          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
             <i class="fa fa-th-list"></i>
             {{category-title}}
          </a>
        </h4>
      </div>
      <div id="collapse" class="panel-collapse collapse">
        <div class="panel-body">
          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
            <dt class="i-archive-item-list col-sm-3">
              <sapn class="i-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="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
              <dd>
                <a href="{{file-url}}" class="i-archive-files-item" target="_blank" title="{{file-name}}">{{file-name}}</a>
                <span class="label label-primary {{file-type}}">{{file-type}}</span>
              </dd>
            </dl>
          </dl>
        </div>
      </div>
    </div>
        {{link_to_edit}}
  </div>
  <style>
    @media (min-width: 769px){
      .index-archive-2 .dl-horizontal dt.col-sm-3{
        width: 25%;
      }
    }
  </style>
</div>