<div ng-if="PERMS.canViewDatabaseBackups == false">
    <ng-include src="'views/permissionserror.ptt'"></ng-include>
</div>
<div ng-if="PERMS.canViewDatabaseBackups" ng-controller="dbBackups">
    <div ng-controller="backups">
        <h3>{{ LANG.t('Database Backups')}}</h3>
        <div class="row search-page-container">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-5">
                <div class="input-group ng-isolate-scope ng-valid">
                    <input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="{{ LANG.t('Search') }}" title="{{ LANG.t('Search') }}" ng-model="meta.filterValue" ng-keyup="fetchData()" aria-label="{{ LANG.t('Search') }}">
                    <span class="input-group-btn">
                    <button id="email_table_search_submit_btn" class="btn btn-default" ng-click="clear()" aria-label="Search">
                         <span class="glyphicon glyphicon-search" ng-class="{ 'glyphicon-search' : !meta.filterValue, 'glyphicon-remove' :meta.filterValue  }" aria-hidden="true"></span>
                    </button>
                </span>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-7">
                <div class="row search-page-container hidden-xs hidden-sm">
                    <div class="pull-right">
                        <div class="pagination-container">
                            <page-size id="job_table_items_per_page"
                                    allowed-sizes="metaData.pageSizes"
                                    total-items="metaData.totalItems"
                                    ng-model="metaData.pageSize"
                                    show-all="false"
                                    ng-show="meta.showPagination()"
                                    ng-change="fetchData()">
                            </page-size>
                            <ul uib-pagination id="job_table_paginate"
                                    total-items="metaData.totalItems"
                                    ng-model="metaData.currentPage"
                                    max-size="metaData.maxPages"
                                    boundary-links="true"
                                    rotate="false"
                                    previous-text="<"
                                    next-text=">"
                                    first-text="<<"
                                    last-text=">>"
                                    items-per-page="metaData.pageSize"
                                    ng-show="meta.showPagination()"
                                    ng-change="fetchData()">
                            </ul>
                        </div>
                        <p ng-show="meta.showItemCountText()">{{ meta.getItemCountText() }}</p>
                    </div>
                </div>
                <div class="row hidden-md hidden-lg">
                    <div class="col-xs-12">
                        <p class="text-right" ng-show="meta.showItemCountText()">{{ meta.getItemCountText() }}</p>
                    </div>
                </div>
                <div class="row search-page-container visible-xs-block visible-sm-block hidden-md hidden-lg">
                    <div class="col-xs-12 col-sm-12">
                        <div class="pagination-container">
                            <page-size id="account_table_items_per_page_mobile"
                                    allowed-sizes="metaData.pageSizes"
                                    total-items="metaData.totalItems"
                                    ng-model="metaData.pageSize"
                                    show-all="false"
                                    ng-show="meta.showPagination()"
                                    ng-change="fetchData()">
                            </page-size>
                            <ul uib-pagination id="account_table_paginate_mobile"
                                    total-items="metaData.totalItems"
                                    ng-model="metaData.currentPage"
                                    max-size="0"
                                    boundary-links="true"
                                    rotate="false"
                                    previous-text="<"
                                    next-text=">"
                                    first-text="<<"
                                    last-text=">>"
                                    items-per-page="metaData.pageSize"
                                    ng-show="meta.showPagination()"
                                    ng-change="fetchData()"
                                    class="pagination-small">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-5">
                <alert-box ng-show="backupHandler.queue.restore.length || backupHandler.queue.download.length">
                    <div ng-show="backupHandler.queue.restore.length"><i class="fas fa-sync-alt fa-spin"></i> {{LANG.t("Restore in progress...")}}  </div>
                    <div ng-show="backupHandler.queue.download.length"><i class="fas fa-sync-alt fa-spin"></i> {{LANG.t("Download in progress...")}}</div>
                </alert-box>
            </div>
        </div>

        <table class="table table-striped table-striped-child responsive-table details-table">
            <thead>
            <tr>
                <th class="hidden-xs col-md-1"><div style="width: 35px !important;"></div></th>
                <th class="col-md-3">
                    <a class="sort-link ng-isolate-scope" sort-by sort-meta="meta" onSort="fetchData()" sort-field="name" title="{{ LANG.t('Sort by Database Name') }}">{{ LANG.t("Database Name") }}</a>
                </th>
                <th class="col-md-2">
                    <a class="sort-link ng-isolate-scope" sort-by sort-meta="meta" onSort="fetchData()" sort-field="created" title="{{ LANG.t('Sort by Creation Date') }}">{{ LANG.t("Creation Date") }}</a>
                </th>
                <th class="hidden-xs col-md-1">
                    <a class="sort-link ng-isolate-scope" sort-by sort-meta="meta" onSort="fetchData()" sort-field="size" title="{{ LANG.t('Sort by Size') }}">{{ LANG.t("Size") }}</a>
                </th>
                <th class="hidden-xs col-md-2" ng-if="PERMS.canAddBackupNotes">
                    {{ LANG.t("Notes") }}
                </th>
                <th class="hidden-xs col-md-1">
                    <a  class="sort-link ng-isolate-scope" sort-by sort-meta="meta" sort-field="location" title="{{ LANG.t('Sort by Location') }}">{{ LANG.t("Location") }}</a>
                </th>
                <th class="col-md-3" ng-if="PERMS.canRestoreDatabaseBackups || PERMS.canDownloadDatabaseBackups">
                    <span>{{ LANG.t("Actions") }}</span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr class="data-row ng-scope table-striped" ng-repeat-start="backup in backups track by $index" id="backup_row_{{$index}}">
                <td class="hidden-xs">
                    <div class="row-expand-container" >
                        <button class="btn btn-link" ng-class="{'cursorText': !backup.isExpanded, cursorPointer: backup.isExpanded  }" title="{{ LANG.t('Click to close')}}" ng-click="backup.isExpanded = false">
                            <i  class="fas"  ng-class="{ 'fa-chevron-down': backup.isExpanded, 'fa-chevron-right': !backup.isExpanded && !isRTL, 'fa-chevron-left': !backup.isExpanded && isRTL }" aria-hidden="true"></i>
                        </button>
                    </div>
                </td>
                <td data-title="{{ LANG.t('Domain') }}">
                    <span title="{{ backup.name }}">{{ backup.name }}</span>
                </td>
                <td data-title="{{ LANG.t('Creation Date') }}">
                    <span title="{{ LANG.d(backup.created) }}">{{ LANG.d(backup.created) }}</span>
                </td>
                <td data-title="{{ LANG.t('Size') }}">
                    <span title="{{ backup.size ? UTILS.sizeToHumanReadable(backup.size) : '-' }}">{{ backup.size ? UTILS.sizeToHumanReadable(backup.size) : '-' }}</span>
                </td>
                <td data-title="{{ LANG.t('Notes') }}" ng-if="PERMS.canAddBackupNotes">
                    <div class="editableBox" ng-hide="backup.editing" ng-dblclick="openNotesEdit(backup)" title="{{ backup.notes }}">{{ backup.notes ? backup.notes : "Click to add Note..." }}</div>
                    <input ng-show="backup.editing" ng-model="backup.notes" ng-blur="saveNotes(backup)" focus-input="backup.editing" placeholder="{{ LANG.t('Enter Notes...')}}" class="form-control" />
                </td>
                <td data-title="{{ LANG.t('Location') }}">
                    <span title="{{ backup.location }}">{{ backup.location }}</span>
                </td>
                <td ng-show="PERMS.canRestoreDatabaseBackups || PERMS.canDownloadDatabaseBackups">
                    <a ng-if="PERMS.canRestoreDatabaseBackups" class="btn btn-outline-primary btn-sm" ng-click="onClickRestore(backup)"  title="{{ LANG.t ('Restore account from backup %s' , LANG.d(backup.created)) }}">
                        <span class="fas fa-sync"></span>
                        <span class="text-uppercase">{{ LANG.t("Restore") }}</span>
                    </a>
                    <a ng-if="PERMS.canDownloadDatabaseBackups && !backup.queue.download && !backup.download" class="btn btn-outline-primary btn-sm" ng-click="onClickDownload(backup)" title="{{ LANG.t ('Download backup %s' , LANG.d(backup.created)) }}">
                        <span class="glyphicon glyphicon-download"></span>
                        <span class="text-uppercase">{{ LANG.t("Generate Download") }}</span>
                    </a>
                    <a ng-if="PERMS.canDownloadDatabaseBackups && backup.download" class="btn btn-outline-primary btn-sm" ng-click="downloadBackup(backup)" title="{{ LANG.t ('Download backup %s', LANG.d(backup.created)) }}">
                        <span class="glyphicon glyphicon-download"></span>
                        <span class="text-uppercase">{{ LANG.t("Download") }}</span>
                    </a>
                    <a ng-if="PERMS.canDownloadDatabaseBackups && backup.download" class="btn btn-outline-primary btn-sm" ng-click="onClickDeleteDownload(backup)" title="{{ LANG.t ('Delete Download %s', LANG.d(backup.created))}}">
                        <span class="glyphicon glyphicon-remove"></span>
                        <span class="text-uppercase">{{ LANG.t("Delete Download") }}</span>
                    </a>
                </td>
            </tr>
            <tr ng-repeat-end ng-if="backup.isExpanded || backup.status" class="wordbreak ng-scope" id="dt_module_row_{{$index}}">
                <td></td>
                <td colspan="7">
                    <div class="action-module" ng-if="actionModule === 'restore'"
                            id="restore_module_{{$index}}"
                            ng-include="'app/views/restoreModule.ptt'"></div>
                    <div class="action-module" ng-if="actionModule === 'download'"
                            id="download_module_{{$index}}"
                            ng-include="'app/views/downloadModule.ptt'"></div>
                    <div class="action-module" ng-if="actionModule === 'deletedownload'"
                            id="delete_download_module_{{$index}}"
                            ng-include="'app/views/deleteModule.ptt'"></div>
                    <div class="status-bar" style="padding-top:10px;" ng-if="backup.status" >
                        <alert-box ng-model="backup.status" on-close="cleatStatus()" auto-close="backup.status.ttl"></alert-box>
                    </div>
                </td>
            </tr>
            <tr ng-hide="!loading">
                <td colspan="7">
                    <span>{{ LANG.t("Loading Backups") }}</span>
                </td>
            </tr>
            <tr ng-hide="backups.length > 0 || loading">
                <td colspan="7">
                    <span>{{ LANG.t("No Backups Found") }}</span>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="row hidden-md hidden-lg">
            <div class="col-xs-12">
                <p class="text-right" ng-hide="!meta.mobileItemCountText">{{ meta.mobileItemCountText }}</p>
            </div>
        </div>

        <div class="return-link" style="cursor: pointer;">
            <a id="lnkReturn" ng-click="changeView('/')" title="{{ LANG.t('Go back to JetBackup menu') }}">
                <span class="glyphicon glyphicon-circle-arrow-left"></span>
                {{ LANG.t("Go Back") }}
            </a>
        </div>
    </div>
</div>