<div class="home">
    <div class="page-title">
        <h2 translate>My backups</h2>
        <a href="#/addstart" class="ekup-button">
            <span translate>Add backup</span>
            <i class="ic-upload-cloud"></i>
        </a>
    </div>

    <div class="statepadding"  ng-controller="StateController">
        <div class="state">
            <div >
                <div ng-hide="state.activeTask == null">
                    <span ng-hide="activeBackup == null">
                        <span ng-hide="StopReqId == activeTaskID">
                            <div class="task-state-info">
                                <div class="task-name" title="{{activeBackup.Backup.Name}}">
                                    <strong>{{activeBackup.Backup.Name}}</strong>
                                </div>
                                <strong>: </strong>
                                <div>
                                    {{StateText}}
                                </div>
                            </div>
                        </span>
                        <span ng-show="StopReqId == activeTaskID">
                            <strong translate>Stopping after the current file:</strong>
                            {{activeBackup.Backup.Name}}
                        </span>
                    </span>
                    <span ng-show="activeBackup == null">
                        <strong ng-hide="StopReqId == activeTaskID" translate>Running task:</strong>
                        <strong ng-show="StopReqId == activeTaskID" translate>Stopping task:</strong>
                        {{StateText}}
                    </span>

                </div>

                <div ng-show="state.activeTask == null &amp;&amp; nextTask != null">
                    <strong translate>Next task:</strong> {{nextTask.Backup.Name}}
                </div>

                <div
                    ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask != null">
                    <strong translate>Next scheduled task:</strong> {{nextScheduledTask.Backup.Name}} <span
                        title="{{nextScheduledTime | parsetimestamp}}">{{nextScheduledTime |
                        parseDate:forceActualDate }}</span></div>

                <div ng-show="state.activeTask == null &amp;&amp; nextTask == null &amp;&amp; nextScheduledTask == null"
                    translate>No scheduled tasks</div>
            </div>

            <div class="progress" ng-if="Progress >= 0">

                <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="{{Progress*100}}" aria-valuemin="0" aria-valuemax="100" style="width:{{Progress*100}}%">
                </div>
            </div>

        </div>

        <div class="action-icons">
            
            <button type="button" ng-if="state.activeTask != null"
                ng-click="stopDialog()"
                class="ekup-button ekup-button-secondary"
                >
                <i class="ic-slash"></i>
                <span translate>Cancel</span>
            </button>
        </div>

        <div class="action-icons">

            <button type="button" ng-if="state.programState == 'Running'"
                ng-click="pauseOptions()"
                title="Click to see the pause options"
                class="ekup-button ekup-button-secondary"
                >
                <i class="ic-pause"></i>
                <span translate>Pause</span>
            </button>
            <button type="button" ng-if="state.programState != 'Running'"
                ng-click="pauseOptions()"
                title="Click to resume"
                class="ekup-button ekup-button-secondary"
                >
                <i class="ic-play"></i>
                <span translate>Resume</span>
            </button>

        </div>
    </div>


    <div class="tasks" ng-controller="HomeController">
        
        <div ng-if="backups == null || backups.length == 0">
            <dt translate>No backup have been created yet.</dt>
        </div>
        <div class="tasklist">
            <div ng-repeat="item in backups track by $index" class="task" ng-class="{opened: item.isOpened}">
                <div class="card">
                    <div style="display: flex; gap: 10px;">
                        <label class="toggle"  for="backup-{{item.Backup.ID}}-toggle" ng-class="{ disabled: toggling }">
                            <input id="backup-{{item.Backup.ID}}-toggle" type="checkbox" ng-model="item.Backup.Enabled" ng-disabled="toggling" ng-change="toggleBackup($index)"/>
                        </label>

                        <a href class="task-title" ng-click="item.isOpened = !item.isOpened" style="flex:1;">
                            <div class="backup-status backup-status-{{ LastBackupStatus(item).toLowerCase()}}"></div>
                            <h3>{{item.Backup.Name}}</h3>
                            <i class="ic-chevron-up" ng-show="item.isOpened"></i>
                            <i class="ic-chevron-down" ng-show="!item.isOpened"></i>

                        </a>
                    </div>
                    <div class="expandable"  ng-class="{expand: item.isOpened}">
                        <div class="inner">
                            <dl class="task-info">
                                
                                <span ng-show="item.Backup.Description">
                                    <dt translate>Description:</dt>
                                    <dd>
                                        {{item.Backup.Description}}
                                    </dd>
                                </span>

                                <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>
                                <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 ng-show="item.Backup.Metadata == null || item.Backup.Metadata.LastBackupFinished == null">
                                    <span >{{'Never' | translate}} - </span>
                                </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><span translate>Backup:</span><info-bubble message="'Size after compression'" /></dt>
                                        <dd translate>{{item.Backup.Metadata.TargetSizeString}}</dd>
                                        <dd></dd>
                                    </div>
                                    <div ng-hide="item.Backup.Metadata.TargetSizeString == null">
                                        <dt translate translate-n="parseInt(item.Backup.Metadata.BackupListCount)" translate-plural="Versions:">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>
                                <div class="task-actions">
                                    <a href ng-hide="LastBackupStatus(item) == 'Running'" class="ekup-button ekup-button-secondary" ng-click="doRun(item.Backup.ID)">
                                        <span translate>Run now</span>
                                        <i class="ic-upload-cloud"></i>
                                    </a>
                                </div>
                                
                                <dd  style=" display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 25px;">
                                    <button class="ekup-button ekup-button-secondary" ng-click="doEdit(item.Backup.ID)">
                                        <i class="ic-edit-2"></i>
                                        <span translate>Edit …</span>

                                    </button>
                                    <button class="ekup-button ekup-button-secondary" ng-click="doExport(item.Backup.ID)">
                                        <i class="ic-download"></i>
                                        <span translate>Export …</span>
                                    </button>
                                    <button class="ekup-button ekup-button-secondary ekup-error-button" ng-click="doDelete(item.Backup.ID, item.Backup.Name)">
                                        <i class="ic-x"></i>
                                        <span translate>Delete …</span>
                                    </button>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
