<div class="backup-result">
    <div class="box one" ng-include="'templates/backup-result/top-left-box.html'"></div>
    <div class="box two" ng-include="'templates/backup-result/top-right-box.html'"></div>
    <div class="box wide three">
        <span ng-show="item.Result.MainOperation === 'Restore'" ng-include="'templates/backup-result/restore-items.html'"></span> 
        <span ng-show="item.Result.MainOperation === 'Test'" ng-include="'templates/backup-result/test-items.html'"></span>

        <span ng-show="item.Result.TestResults"             class="item" ng-include="'templates/backup-result/phases/test.html'"></span>
        <span ng-show="item.Result.CompactResults"          class="item" ng-include="'templates/backup-result/phases/compact.html'"></span>
        <span ng-show="item.Result.DeleteResults"           class="item" ng-include="'templates/backup-result/phases/delete.html'"></span>
        <span ng-show="item.Result.RepairResults"           class="item" ng-include="'templates/backup-result/phases/repair.html'"></span>
        <span ng-show="item.Result.RecreateDatabaseResults" class="item" ng-include="'templates/backup-result/phases/recreate-database.html'"></span>
        <span ng-show="item.Result.PurgeResults"            class="item" ng-include="'templates/backup-result/phases/purge.html'"></span> 

        <!-- 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.Warnings,
                'length': item.Result.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.Errors,
                'length': item.Result.ErrorsActualLength,
                'type': 'Error',
                'title': gettextCatalog.getString('Errors') }"
            ng-include="'templates/backup-result/message-list.html'"></span>
    </div>
    <div class="box item wide four">
        <div class="log-expand-copy">
            <span ng-click="log_expanded = !log_expanded" class="key" ng-style="{ cursor: 'pointer' }">
                {{ 'Complete log' | translate }}
                <i class="fa fa-angle-{{log_expanded ? 'up': 'down'}}"></i>
            </span>
            
            <a href ng-show="log_expanded" ngclipboard data-clipboard-action="copy" data-clipboard-target="#result-log-{{$index}}">
                <i class="fa fa-clipboard"></i> 
                {{ 'Copy log' | translate }}
            </a>
        </div>

        <textarea readonly ng-show="log_expanded" id="result-log-{{$index}}" class="exceptiontext" wrap="off">
            {{ item.Formatted }}
        </textarea>
    </div>
</div>
