Mini Shell

<div ng-controller="restoreDisasterRecovery" class="controller-box">

    <div class="row search-page-container">
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
            <div style="display: inline-block;" tooltip-enable="!getChecked().length" tooltip="top|Please select ISO image to download">
                <button class="btn btn-primary" ng-click="download()" ng-disabled="!getChecked().length">
                    <em class="fas fa-download"></em>
                    {{ lang.t("Download") }}
                </button>
            </div>
            <div style="display: inline-block;" tooltip-enable="!getChecked().length" tooltip="top|Please select ISO image to download">
                <button class="btn btn-primary" ng-click="lock()" ng-disabled="!getChecked().length">
                    <em class="fas fa-lock"></em>
                    {{ lang.t("Lock") }}
                </button>
            </div>
            <div style="display: inline-block;" tooltip-enable="!getChecked().length" tooltip="top|Please select ISO image to download">
                <button class="btn btn-primary" ng-click="unlock()" ng-disabled="!getChecked().length">
                    <em class="fas fa-lock-open"></em>
                    {{ lang.t("Unlock") }}
                </button>
            </div>
            <button class="btn btn-danger" type="button" ng-click="unCheckAll();" ng-show="getChecked().length">
                <em class="fas fa-times"></em>
                {{ lang.t("Clear Selection") }}
            </button>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <search ng-model="filter" ng-change="fetch()"></search>
        </div>
    </div>
    
    <div class="table-responsive">
        <table class="table table-striped content-table">
            <thead>
            <tr>
                <th class="column-title" style="width: 20px;">
                    <div class="pretty p-default p-curve p-smooth">
                        <input aria-label="{{lang.t('Select all backups checkbox')}}" type="checkbox" ng-model="isAllChecked" ng-checked="isAllChecked" id="checkall" ng-click="checkAll()" />
                        <div class="state p-danger"><label for="checkall"><span style="display: none;">{{ lang.t("Check") }}</span></label></div>
                    </div>
                </th>
                <th class="column-title">
                    {{ lang.t("Name") }}
                </th>
                <th class="col-sm-3 col-md-3 col-lg-3 column-title">
                    {{ lang.t("Created") }}
                </th>
                <th class="col-sm-2 col-md-2 col-lg-2 column-title">
                    {{ lang.t("Destination") }}
                </th>
                <th class="col-sm-3 col-md-3 col-lg-3 column-title">
                    {{ lang.t("Notes") }}
                </th>
                <th class="col-sm-1 col-md-1 col-lg-1 column-title">
                    {{ lang.t("Size") }}
                </th>
                <th class="col-sm-1 col-md-1 col-lg-1 column-title">
                    <span tooltip="Locking a backup will keep it stored on your destination server and keep it from being overwritten based on your retention limit.">{{ lang.t("Lock Status") }}</span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="backup in backups track by $index">
                <td ng-click="$event.stopPropagation();">
                    <div class="pretty p-default p-curve p-smooth">
                        <input aria-label="{{lang.t('checkbox, - Add backup to multiple selection')}}" type="checkbox" ng-model="backup.checked" ng-checked="backup.checked" id="check_{{backup.name}}" ng-click="checkChanged(backup)" />
                        <div class="state p-danger"><label for="check_{{backup.name}}"><span style="display: none;">{{ lang.t("Check") }}</span></label></div>
                    </div>
                </td>
                <td data-title="{{ lang.t('Name') }}">
                    {{ backup.name }}
                </td>
                <td data-title="{{ lang.t('Selected Backup') }}">
                    <strong ng-hide="backup.options.length">{{ lang.d(backup.created, 'shorttime') }}</strong>
                </td>
                <td data-title="{{ lang.t('Destination') }}">
                    {{backup.destination_name}}
                </td>
                <td data-title="{{ lang.t('Notes') }}" ng-dblclick="backup.editing = true;">
                    <div class="editable" ng-hide="backup.editing">{{ backup.notes ? backup.notes : lang.t("Double click to add notes...") }}</div>
                    <input ng-show="backup.editing" type="text" style="font-weight: normal;" class="form-control" ng-model="backup.notes" ng-keypress="saveNotes(backup, $event)" ng-blur="saveNotes(backup)" placeholder="{{ lang.t('Enter Notes...') }}" value="" />
                </td>
                <td data-title="{{ lang.t('Size') }}">
                    {{ backup.size >= 0 ? util.sizeToHumanReadable(backup.size) : lang.t("N/A") }}
                </td>
                <td data-title="{{ lang.t('Lock Status') }}"  uib-tooltip="{{ backup.lock_ttl ? lang.t('Locked until %s', lang.d(backup.lock_ttl)) : lang.t('Locked with unlimited time') }}" tooltip-enable="backup.lock" style="text-align: center;" >
                    <em aria-hidden="true" class="fas" ng-class="{ 'fa-lock': backup.lock, 'fa-lock-open': !backup.lock }"></em>
                </td>
            </tr>
            <tr ng-hide="!loading">
                <td colspan="10">
                    <loading-box><span>{{ lang.t("Loading Backups") }}</span></loading-box>
                </td>
            </tr>
            <tr ng-hide="backups.length > 0 || loading">
                <td colspan="10"><span>{{ lang.t("No Backups Found") }}</span></td>
            </tr>
            </tbody>
        </table>
    </div>

</div>