<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

?>
<div class="nav-bar-outer-actions">
    <div class="outer-actions-inner-wrap">
        <div class="btn-wrap btn-wrap-triangle-right btn-wrap-next">
            <button
                type="button"
                class="btn btn-prime"
                ng-click="goToStartUpdater()"
                ng-disabled="checkingInProgress()
                || (hasErrors && ($state.is('root.create-backup-' + $state.current.type + '.progress')))
                || (!nextButtonStatus && ($state.is('root.create-backup-' + $state.current.type)))"
                >Next</button>
        </div>
        <div class="btn-wrap btn-wrap-triangle-left btn-wrap-prev">
            <button
                type="button"
                class="btn"
                ng-click="previousState()"
                ng-disabled="checkingInProgress() && !hasErrors"
                >Back</button>
        </div>
        <div class="btn-wrap btn-wrap-try-again"
             ng-show="$state.is('root.create-backup-' + $state.current.type + '.progress')">
            <button
                type="button"
                class="btn btn-secondary"
                ng-click="$state.forceReload()"
                ng-disabled="checkingInProgress()"
                >Try Again</button>
        </div>
    </div>
</div>

<h2 class="page-title">{{$state.current.header}}</h2>

<div ng-show="$state.is('root.create-backup-' + $state.current.type)">
    <form
        novalidate
        name="backup"
        role="form"
        >
        <fieldset class="form-fieldset">
            <div class="row form-row">
                <div class="col-m-3">
                    <label class="form-label">
                        Backup Options
                    </label>
                </div>
                <div class="col-m-4">
                    <div class="form-row">
                        <input
                            id="optionsCode"
                            class="form-el-checkbox"
                            type="checkbox"
                            ng-model="backupInfo.options.code"
                            ng-checked="backupInfo.options.code"
                            >
                        <label class="form-label" for="optionsCode">
                            Code
                        </label>
                    </div>
                    <div class="form-row">
                        <input
                            id="optionsMedia"
                            class="form-el-checkbox"
                            type="checkbox"
                            ng-model="backupInfo.options.media"
                            ng-checked="backupInfo.options.media"
                            >
                        <label class="form-label" for="optionsMedia">
                            Media
                        </label>
                    </div>
                    <div class="form-row">
                        <input
                            id="optionsDb"
                            class="form-el-checkbox"
                            type="checkbox"
                            ng-model="backupInfo.options.db"
                            ng-checked="backupInfo.options.db"
                            >
                        <label class="form-label" for="optionsDb">
                            Database
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<div ng-show="$state.is('root.create-backup-' + $state.current.type) && (backupInfo.options.code
|| backupInfo.options.media || backupInfo.options.db)" class="accent-box">
    <p>Let's check your disk space availability for taking selected backups, and then create the backups.</p>
    <button
        class="btn btn-large btn-prime"
        ng-click="$state.go('.progress')"
        type="button"
        >Create Backup</button>
</div>
<div class="message message-warning" ng-show="optionsSelected()">
    <span class="message-text">
        <strong>
            We noticed you didn’t select anything to back up. We strongly recommend you back up before continuing.
        </strong>
    </span>
</div>
<div ui-view></div>
