<div class="home">
    <div class="tasks" ng-controller="HomeController">
        <div class="tasklist">
            <div ng-if="backups == null || backups.length == 0">
                <dt translate>No backup have been created yet.</dt>
                <!-- <div>                    
                    <a class="action-link" href="#/addstart"><img src="img/mainmenu/add.png" style="width: 14px;"/> {{ 'Add backup' | translate }}</a>
                </div> -->
            </div>
            <div ng-repeat="item in backups" class="task">
                <a href ng-click="$parent.TaskMenuID == item.Backup.ID ? $parent.TaskMenuID = null : $parent.TaskMenuID = item.Backup.ID">
                    <img ng-show="item.Backup.ID != state.activeTask.Item2 && item.Backup.Metadata.NextScheduledRun == null" src="img/backup.png" srcset="img/backup.png 1x, img/backup_2x.png 2x, img/backup_3x.png 3x">
                    <img ng-show="item.Backup.ID != state.activeTask.Item2 && item.Backup.Metadata.NextScheduledRun != null" src="img/backupschedule.png" srcset="img/backupschedule.png 1x, img/backupschedule_2x.png 2x, img/backupschedule_3x.png 3x">
                    <img ng-show="item.Backup.ID == state.activeTask.Item2 && state.programState == 'Running'" src="img/backuprunning.png" srcset="img/backuprunning.png 1x, img/backuprunning_2x.png 2x, img/backuprunning_3x.png 3x">
                    <img ng-show="item.Backup.ID == state.activeTask.Item2 && state.programState == 'Paused'" src="img/backuppause.png" srcset="img/backuppause.png 1x, img/backuppause_2x.png 2x, img/backuppause_3x.png 3x">
                    <div ng-if="CurrentBackupStatus(item) == 'Running'" class="backup-status backup-status-running">
                        <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
                    </div>
                    {{item.Backup.Name}}
                    <img ng-show="$parent.TaskMenuID == item.Backup.ID" src="img/arrow_collapse_blue.png" srcset="img/arrow_collapse_blue.png 1x, img/arrow_collapse_blue_2x.png 2x, img/arrow_collapse_blue_3x.png 3x">
                    <img ng-show="$parent.TaskMenuID != item.Backup.ID" src="img/arrow_expand_blue.png" srcset="img/arrow_expand_blue.png 1x, img/arrow_expand_blue_2x.png 2x, img/arrow_expand_blue_3x.png 3x">
                </a>

                <dl class="taskmenu" ng-show="$parent.TaskMenuID == item.Backup.ID">
                    <span ng-show="item.Backup.Description">
                        <dt translate>Description:</dt>
                        <dd>
                            {{item.Backup.Description}}
                        </dd>
                    </span>

                    <!-- <dt translate>Operations:</dt>
                    <dd>
                        <p ng-click="doRun(item.Backup.ID)" translate>Run now</p>
                        <p ng-click="doRestore(item.Backup.ID)" translate>Restore files …</p>
                    </dd> -->

                    <dt translate>Configuration:</dt>
                    <dd>
                        <p ng-click="doEdit(item.Backup.ID)" translate>Edit …</p>
                        <p ng-click="doExport(item.Backup.ID)" translate>Export …</p>
                        <p ng-click="doDelete(item.Backup.ID, item.Backup.Name)" translate>Delete …</p>
                    </dd>

                    <!-- <dt translate>Advanced:</dt>
                    <dd>
                        <p ng-click="doLocalDb(item.Backup.ID)" translate>Database …</p>
                        <p ng-click="doVerifyRemote(item.Backup.ID)" translate>Verify files</p>
                        <p ng-click="doCompact(item.Backup.ID)" translate>Compact now</p>
                        <p ng-click="doCommandLine(item.Backup.ID)" translate>Commandline …</p>
                    </dd>

                    <dt translate>Reporting:</dt>
                    <dd>
                        <p ng-click="doShowLog(item.Backup.ID)" translate>Show log …</p>
                        <p ng-click="doCreateBugReport(item.Backup.ID)" translate>Create bug report …</p>
                    </dd> -->
                </dl>

                <dl>
                    
                    <dt translate>Last backup:</dt>
                    <dd ng-hide="item.Backup.Metadata == null || (item.Backup.Metadata.LastBackupFinished == null && item.Backup.Metadata.LastErrorDate == null)"
                        title="{{item.Backup.Metadata.LastBackupFinished | parsetimestamp }}"
                        translate translate-params-time="item.Backup.Metadata.LastBackupFinished > item.Backup.Metadata.LastErrorDate  ? item.Backup.Metadata.LastBackupFinished : item.Backup.Metadata.LastErrorDate  | parseDate:forceActualDate"
                        translate-params-duration="formatDuration(item.Backup.Metadata.LastBackupDuration || item.Backup.Metadata.LastDuration)">{{time}} (took {{duration}})
                    </dd>
                    <dd ng-show="item.Backup.Metadata == null || item.Backup.Metadata.LastBackupFinished == null">{{'Never' | translate}} </dd>
                    <dd>
                        <div class="backup-status backup-status-{{ LastBackupStatus(item).toLowerCase()}}"></div>
                    </dd>
                    <dt translate>Last backup status:</dt>
                    <dd>{{ LastBackupStatus(item) | translate}}</dd>
                    <dt translate>Last successful backup:</dt>
                    <dd ng-hide="item.Backup.Metadata == null || item.Backup.Metadata.LastBackupFinished == null"
                        title="{{item.Backup.Metadata.LastBackupFinished | parsetimestamp }}"
                        translate translate-params-time="item.Backup.Metadata.LastBackupFinished | parseDate:forceActualDate"
                        translate-params-duration="formatDuration(item.Backup.Metadata.LastBackupDuration || item.Backup.Metadata.LastDuration)">{{time}} (took {{duration}})
                    </dd>
                    <dd>
                        <span ng-show="item.Backup.Metadata == null || item.Backup.Metadata.LastBackupFinished == null">{{'Never' | translate}} - </span>
                        <a href ng-hide="LastBackupStatus(item) == 'Running'" class="action-link" ng-click="doRun(item.Backup.ID)" translate>Run now</a>
                    </dd>

                    <div ng-hide="item.Backup.Metadata == null || item.Backup.Metadata.NextScheduledRun == null">
                        <dt translate>Next scheduled run:</dt>
                        <dd title="{{item.Backup.Metadata.NextScheduledRun | parsetimestamp }}">{{item.Backup.Metadata.NextScheduledRun | parseDate:forceActualDate }}</dd>
                    </div>
                    <div ng-hide="item.Backup.Metadata == null">
                        <div ng-hide="item.Backup.Metadata.SourceSizeString == null">
                            <dt translate>Source:</dt>
                            <dd translate translate-n="parseInt(item.Backup.Metadata.SourceFilesCount)" translate-plural="{{item.Backup.Metadata.SourceSizeString}} / {{$count}} Files">{{item.Backup.Metadata.SourceSizeString}} / {{item.Backup.Metadata.SourceFilesCount}} File</dd>
                        </div>
                        <div ng-hide="item.Backup.Metadata.TargetSizeString == null">
                            <dt translate>Backup:</dt>
                            <dd translate>{{item.Backup.Metadata.TargetSizeString}}</dd>
                            <dd><info-bubble message="'Size after compression'" /></dd>
                        </div>
                        <div ng-hide="item.Backup.Metadata.TargetSizeString == null">
                            <dt translate>Version:</dt>
                            <dd>{{item.Backup.Metadata.BackupListCount}}</dd>
                        </div>
                    </div>
                    <div ng-hide="item.Backup.ID != state.activeTask.Item2 || state.lastPgEvent.CurrentFilename == null">
                        <dt translate>Current action:</dt>
                        <dd>{{state.lastPgEvent.Phase}}</dd>
                        <dt translate>Progress:</dt>
                        <dd>
                            <div class="progress-small-bg">
                                <div class="progress-small" style="width: {{(1 - (state.lastPgEvent.CurrentFilesize - state.lastPgEvent.CurrentFileoffset) / state.lastPgEvent.CurrentFilesize) * 200}}px">
                                    {{(1 - (state.lastPgEvent.CurrentFilesize - state.lastPgEvent.CurrentFileoffset) / state.lastPgEvent.CurrentFilesize) * 100 | number:2}}%
                                </div>
                            </div>
                        </dd>
                        <dt translate>Current file:</dt>
                        <dd>{{state.lastPgEvent.CurrentFilename}}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
