<span ng-click="cr_expanded = !cr_expanded" style="cursor: pointer">
    <i class="{{ResultIcon(item.Result.CompactResults.ParsedResult)}}"></i>
    <span class="key" translate>Compact Phase</span>
    <span class="value"><i class="fa fa-angle-{{cr_expanded ? 'up': 'down'}}"></i></span>
</span>
<div ng-show="cr_expanded" class="expanded">
    <span class="item">
        <span class="key" translate>Start </span>
        <span class="value">{{ parseTimestampToSeconds(item.Result.CompactResults.BeginTime) }}</span>
    </span>
    <span class="item">
        <span class="key" translate>End </span>
        <span class="value">{{ parseTimestampToSeconds(item.Result.CompactResults.EndTime) }}</span>
    </span>
    <span class="item">
        <span class="key" translate>Duration </span>
        <span class="value">{{ formatDuration(item.Result.CompactResults.Duration) }}</span>
    </span>

    <div class="horizontal-rule"></div>

    <span class="item">
        <span class="key" translate>Deleted files </span>
        <span class="value">{{ item.Result.CompactResults.DeletedFileCount }}
            ({{ formatSize(item.Result.CompactResults.DeletedFileSize) }})</span>
    </span>
    <span class="item">
        <span class="key" translate>Downloaded files </span>
        <span class="value">{{ item.Result.CompactResults.DownloadedFileCount }}
            ({{ formatSize(item.Result.CompactResults.DownloadedFileSize) }})</span>
    </span>
    <span class="item">
        <span class="key" translate>Uploaded files </span>
        <span class="value">{{ item.Result.CompactResults.UploadedFileCount }}
            ({{ formatSize(item.Result.CompactResults.UploadedFileSize) }})</span>
    </span>

    <div class="horizontal-rule"></div>

    <!-- ng-if="true" isolates the scope of 'data' in ng-init, this way we can include the same template using the same variable more than one time
        without them intercepting each other's data. Similar to passing a parameter to the included template -->
    <span class="item" ng-if="true" 
        ng-init="data = {
            'messages': item.Result.CompactResults.Warnings,
            'length': item.Result.CompactResults.WarningsActualLength,
            'type': 'Warning',
            'title': gettextCatalog.getString('Warnings') }"
        ng-include="'templates/backup-result/message-list.html'">
    </span>
    <span class="item" ng-if="true"
        ng-init="data = {
            'messages': item.Result.CompactResults.Errors,
            'length': item.Result.CompactResults.ErrorsActualLength,
            'type': 'Error',
            'title': gettextCatalog.getString('Errors') }"
        ng-include="'templates/backup-result/message-list.html'">
    </span>
</div>
