<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="buttons">
                <button type="button" ng-if="state.activeTask != null"
                    ng-click="stopDialog()"
                    class="ekup-icon-button ekup-icon-warning-button"
                    >
                    <i class="ic-square-fill"></i>
                </button>
                <button type="button" ng-if="state.activeTask == null && state.programState != 'Running'"
                    ng-click="sendResume()"
                    class="ekup-icon-button ekup-icon-success-button"
                    >
                    <i class="ic-play"></i>
                </button>
            </div> -->

            <!-- <div class="progress-bar progress-bar-striped" ng-class="{active: Progress < 0}" role="progressbar"
                aria-valuenow="{{Progress * 100}}" aria-valuemin="0" aria-valuemax="100"
                style="width:{{Progress * 100}}%"></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-warning-button"
                >
                <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-warning-button"
                >
                <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-success-button"
                >
                <i class="ic-play"></i>
                <span translate>Resume</span>
            </button>

            <!-- <div class="throttle {{throttle_active ? 'active' : 'inactive'}}" ng-click="throttleOptions()" title="{{'Click to set throttle options' | translate}}" alt="{{'Click to set throttle options' | translate}}"></div> -->
        </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" class="task" ng-class="{opened: $parent.TaskMenuID == item.Backup.ID}">
                <div class="card">
                    <a href class="task-title" ng-click="$parent.TaskMenuID == item.Backup.ID ? $parent.TaskMenuID = null : $parent.TaskMenuID = item.Backup.ID">
                        <div class="backup-status backup-status-{{ LastBackupStatus(item).toLowerCase()}}"></div>
                        <h3>{{item.Backup.Name}}</h3>
                        <i class="ic-chevron-up" ng-show="$parent.TaskMenuID == item.Backup.ID"></i>
                        <i class="ic-chevron-down" ng-show="$parent.TaskMenuID != item.Backup.ID"></i>

                    </a>

                    <div class="expandable"  ng-class="{expand: $parent.TaskMenuID == item.Backup.ID}">
                        <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>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>
                                    <!-- <a href class="ekup-icon-button">
                                        <i class="ic-more-vertical"></i>
                                        <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>
                                    </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>
