<steps on-finish="finished()" class="setup">
    <step class="step1" name="welcome">
        <h3>{{'welcome_to_passman' | translate}}</h3>
        <div style="padding-left: 5px;">{{'intro_text' | translate}}</div>
        <div style="padding-left: 5px; margin-bottom: 20px;"><b>{{'extra_accounts' | translate}}</b></div>

        <button class="md-btn default margin5" ng-click="next()" ng-disabled="saving">

        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'begin' | translate}}
        </span>
        </button>

    </step>
    <step class="step2" name="server">
        <h3>{{'nextcloud_settings' | translate}}</h3>
        <div class="group">
            <input type="text" ng-model="settings.nextcloud_host" ng-blur="checkHost()"
                   required>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{'server_url' | translate}}</label>
            <div class="text-danger" ng-if="isHTTP(settings.nextcloud_host)" style="margin-top: 5px;">{{ 'http_warning' | translate}}</div>
        </div>
        <div class="group">
            <input type="text" ng-model="settings.nextcloud_username"
                   required >
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{'username' | translate}}</label>
        </div>
        <div class="group">
            <input type="password" ng-model="settings.nextcloud_password"
                   required ng-enter="next()">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{'password' | translate}}</label>
        </div>
        <div ng-include="'error_template.html'"></div>
        <button step-previous class="md-btn margin5">
            <span>{{'prev' | translate}}</span>
        </button>

        <button class="md-btn default margin5" ng-click="next()" ng-disabled="saving">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'next' | translate}}
        </span>
        </button>
    </step>
    <step class="step3" name="vault">
        <h3>{{'default_vault' | translate}}</h3>
        <div style="margin-bottom: 35px; padding-left: 5px">{{'default_vault_desc' | translate}}</div>
        <div class="group" ng-if="vaults.length === 0">
            {{'no_vaults' | translate}}
        </div>
        <div class="group" ng-if="vaults.length > 0">
            <select id="defaultVault" class="input-md" ng-model="settings.default_vault" required
                    ng-options="vault.name for vault in vaults track by vault.guid"></select>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{'select_default_vault' | translate}}</label>
        </div>



        <div class="group" ng-if="vaults.length > 0">
            <input type="password" ng-model="settings.vault_password" ng-enter="next()"
                   required>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{'vault_password' | translate}}</label>
        </div>

        <button step-previous class="md-btn margin5">
            <span>{{'prev' | translate}}</span>
        </button>

        <button class="md-btn default margin5" ng-click="next()" ng-disabled="saving">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'next' | translate}}
        </span>
        </button>
    </step>
    <step class="step4" name="master">
        <h3>{{'enter_master_password' | translate}}</h3>
        <div style="padding-left: 5px">{{'enter_master_password_desc' | translate}}</div>
        <br/>
        <div class="group" style="margin-bottom: 20px;">
            <input type="password" ng-model="settings.master_password"
                   required>
            <span class="highlight"></span>
            <span class="bar"></span>
        </div>
        <br/>
        <div class="group" style="margin-bottom: 20px;">
            <input type="password" ng-model="settings.master_password_repeat" ng-enter="next()"
                   required>
            <span class="highlight"></span>
            <span class="bar"></span>
        </div>
        <br/>
        <div class="md-checkbox checkbox-rotate" style="margin-bottom: 15px;">
            <label class="input-checkbox checkbox-lightBlue">
                <input type="checkbox" id="master_password_remember" ng-model="settings.master_password_remember">
                <span class="checkbox"></span>
            </label>
            <label for="master_password_remember" class="label">{{'remember_master_password' | translate}}</label>
        </div>
        <button step-previous class="md-btn margin5">
            <span>{{'prev' | translate}}</span>
        </button>

        <button class="md-btn default margin5" ng-click="next()" ng-disabled="saving">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'next' | translate}}
        </span>
        </button>
    </step>
    <step class="step5" name="last">
        <h3>{{'done' | translate}}!</h3>
        <div style="padding-left: 5px; margin-bottom: 20px;">{{'done_donate' | translate}}</div>


        <button step-finish class="md-btn default margin5" ng-disabled="saving">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'finish' | translate}}
        </span>
        </button>
        <button class="md-btn default margin5" ng-disabled="saving">
        <span>
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2"
               target="_blank" style="color: #fff;">{{'donate' | translate}}</a>
        </span>

        </button>
    </step>
</steps>

<script type="text/ng-template" id="error_template.html">
    <div class="alert alert-warning" ng-show="errors.length > 0">
        <div ng-repeat="error in errors">{{error}}</div>
    </div>
</script>