<!--
 ! NOTE: Please do not edit this file directly
 ! Create your custom reports in the 'ext' folder
 !-->
<div class="test-case-history grid" ng-init="predicate = 'date';reverse = false;">
    <div>
        <div class="rows header">
            <div class="col-sm-12">
                Duration
            </div>
        </div>
        <div class="rows container">
            <highchart config="report.chartData" class="col-sm-12" style="width: 100%; height: 200px;"></highchart>
        </div>
    </div>
    <div>
        <div class="rows header">
            <div class="col-sm-2"><sprite img="calendar" sprite-class="icon-sm"></sprite>
                <a data-role="header-datetime" href="" ng-click="predicate = 'date'; reverse=!reverse">Date/Time</a>
                <sprite ng-if="predicate == 'date'" img="{{reverse ? 'sort-ascending' : 'sort-descending'}}" sprite-class="icon-xsm"></sprite>
            </div>
            <div class="col-sm-2"><sprite img="save" sprite-class="icon-sm"></sprite>
                <a data-role="header-qualification" href="" ng-click="predicate = 'result'; reverse=!reverse">Test result</a>
                <sprite ng-if="predicate == 'result'" img="{{reverse ? 'sort-ascending' : 'sort-descending'}}" sprite-class="icon-xsm"></sprite>
            </div>
            <div class="col-sm-{{4/report.extraPropertiesAsColumns.length}}" ng-repeat="extraProp in report.extraPropertiesAsColumns">
                <a data-role="header-{{extraProp}}" href="" ng-click="$parent.predicate = extraProp; $parent.reverse=!$parent.reverse">{{extraProp}}</a>
                <sprite ng-if="$parent.predicate == extraProp" img="{{$parent.reverse ? 'sort-ascending' : 'sort-descending'}}" sprite-class="icon-xsm"></sprite>
            </div>
            <div class="col-sm-{{report.extraPropertiesAsColumns.length == 0 ? 8 : 4}}"><sprite img="tag" sprite-class="icon-sm"></sprite>Tags</div>
        </div>
        <div data-role="runs-for-testcase" class="rows" ng-class="{highlighted: selectedPoint.x == details.date}" ng-repeat="details in report.details | orderBy:[predicate, 'date']:reverse track by $index">
            <div data-role="value-datetime" class="col-sm-2 vertical-content">{{details.date | date:'dd MMM yyyy HH:mm'}}</div>
            <div data-role="value-qualification" class="col-sm-2 vertical-content" ng-if="details.result">
                <sprite img="qualification_success" sprite-class="icon-sm"></sprite>Passed</div>
            <div class="col-sm-2 vertical-content qualification-result" ng-if="!details.result" style="cursor: pointer;">
                <sprite img="qualification_failed" sprite-class="icon-sm"></sprite>
                <a ng-click="showError = !showError;">Show error</a>
                <div ng-if="showError" class="error-message">{{details.firstError}}</div>
            </div>
            <div class="vertical-content content-with-nowrap col-sm-{{4/report.extraPropertiesAsColumns.length}}"
                 ng-repeat="extraProp in report.extraPropertiesAsColumns">{{details[extraProp]}}</div>
            <div data-role="value-tags" class="col-sm-{{report.extraPropertiesAsColumns.length == 0 ? 8 : 4}}">
                <tags-input ng-model="details.tagsData" class="xlt-tags" style="width: 100%;"
                            on-tag-added="tagsUpdated(details.eventId, details.tagsData)"
                            on-tag-removed="tagsUpdated(details.eventId, details.tagsData)"
                            add-from-autocomplete-only="false"
                            placeholder="+">
                    <auto-complete source="search($query)" highlight-matched-text="false"></auto-complete>
                </tags-input>
            </div>
        </div>
    </div>
</div>