<div class="home">
    <div class="tasks" ng-controller="HomeController">
        <div class="tasklist">
            <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">
                    {{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 class="prewrapped-text">{{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 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 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>{{item.Backup.Metadata.SourceSizeString}}</dd>
                        </div>
                        <div ng-hide="item.Backup.Metadata.TargetSizeString == null">
                            <dt translate>Backup:</dt>
                            <dd translate translate-n="parseInt(item.Backup.Metadata.BackupListCount)" translate-plural="{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Versions">{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Version</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>
