<ion-view view-title="Records">
  <ion-content>


    <div ng-repeat="(type_, type_records) in records">

      <div class="mid-bar light-bg padding center" ng-if="total_kms[type_] > 0">
        <h3 class="positiv" style="color:#387ef5;">{{ type_ | translate }} : {{ total_kms[type_] | number:01 }} Km(s)</h2>
      </div> 

      <div class="item">
        <h2 class="positive" ng-if="total_kms[type_] > 0">{{ "_best_records" | translate }}</h2>
        <p class="text-muted" ng-if="type_records.length == 0">
        {{ "_empty_records_text" | translate }} 
        </p>
      </div>

      <div class="table" ng-if="total_kms[type_] > 0">
        <div class="row row-center row-header" style="text-align: center">
          <div class="col col-center">
            <b>{{ "_distk" | translate }}</b>
          </div>
          <div class="col col-center">
            {{ "_speed" | translate }}
          </div>
          <div class="col col-center">
            {{ "_pace" | translate }}
          </div>
          <div class="col col-center">
            {{ "_duration" | translate }}
          </div>
        </div>
      </div>

      <div class="table" ng-if="total_kms[type_] > 0">
        <div class="row row-center" style="text-align: center" ng-repeat="(k, record) in type_records">
          <div class="col col-center col-sep" >
            <b>{{ record.distk | number:0 }}K</b>
          </div>
          <div class="col col-center col-sep">
            {{ record.speed | number:1}}
          </div>
          <div class="col col-center col-sep">
            {{ record.pace | date:"m.ss" }}
          </div>
          <div class="col col-center col-sep">
            {{ record.duration | date:"HH:mm:ss":"UTC" }}
          </div>
        </div>
      </div>

      <div class="item" ng-if="total_kms[type_] > 0">
        <h2 class="positive">{{ "_average_records" | translate }}</h2>
      </div>
      <div class="table">
        <div class="row row-center row-header" style="text-align: center" ng-if="total_kms[type_] > 0">
          <div class="col col-center">
            <b>{{ "_distk" | translate }}</b>
          </div>
          <div class="col col-center">
            {{ "_speed" | translate }}
          </div>
          <div class="col col-center">
            {{ "_pace" | translate }}
          </div>
          <div class="col col-center">
            {{ "_duration" | translate }}
          </div>
        </div>
      </div>

      <div class="table">
        <div class="row row-center" style="text-align: center" ng-repeat="(k, record) in type_records">
          <div class="col col-center col-sep" >
            <b>{{ record.distk | number:0 }}K</b>
          </div>
          <div class="col col-center col-sep">
            {{ record.av_speed | number:1}}
          </div>
          <div class="col col-center col-sep">
            {{ record.av_pace | date:"m.ss" }}
          </div>
          <div class="col col-center col-sep">
            {{ record.av_duration | date:"HH:mm:ss":"UTC" }}
          </div>
        </div>
      </div>

      <div style="height: 40px;"></div>
    </div>
  </ion-content>
</ion-view>
