<div id="caseDrawer" class="case-drawer">
  <div class="drawer-head">
    <ng-include src="'views/case-panel/partials/summary-params.html'"></ng-include>
  </div>
  <span id="cardCount" class="card-count" ng-init="initCounter();" ng-if="displayCardCount > 1" ng-click="toggleExpandCards();">{{displayCardCount}}<br>Items</span>
  <div class="card-container">
    <div class="card" pin-unpin ng-repeat="card in displayCards" ng-click="setActive($event, card);" ng-class="{'active': selectedCard == card};" ng-hide="card.removed">
      <div class="card-inner">
      <ng-include src="'views/card-templates/partials/card-header.html'"></ng-include>
        <h1>{{card.type}}</h1>

        <div class="cardTemplate">

          <script type="text/ng-template" id="cardTemplate">
              <b>{{ item.name }}</b><span ng-if="!item.complex">: {{item.value}}</span>
              <ul ng-if="item.complex">
                <li ng-repeat="item in item.value" ng-include="'cardTemplate'">
                </li>
              </ul>
          </script>

          <div class="data-list" ng-repeat="dataElement in card">
            <div class="contextual-info" ng-if="$index == 0">{{dataElement.name}} : {{dataElement.value}}</div>
            <ul ng-if="$index != 0 && !dataElement.table">
              <li ng-repeat="item in dataElement.value track by $index" ng-include="'cardTemplate'" class="{{item.name | lowercase}}"></li>
          </ul>

          <div ng-if="$index != 0 && dataElement.table">
            <table>
              <div ng-repeat="item in dataElement.value track by $index">
                  {{item.value}}
                <tr ng-repeat="anotherItem in item.value">
                  <h1>there should be values below this</h1><td>{{anotherItem.name}}</td>
                </tr>

            </div>
          </table>
        </div>



      </div>
    </div>
  </div>
</div>