<ion-view>
    <ion-nav-buttons side="left">
        <button class="button button-light no-animation"
                ng-click="start()">
            Skip wizard
        </button>
        <button class="button button-light no-animation" ion-wizard-previous>
            Back
        </button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-light no-animation" ion-wizard-next>
            Next
        </button>
        <button class="button button-light no-animation" ion-wizard-start="start()">
            Start App
        </button>
    </ion-nav-buttons>
    <ion-slide-box ion-wizard>
        <ion-slide ion-wizard-step class="has-header">
            <div class="row">
                <div class="col col-center">
                    <div class="card rounded">
                        <div class="item">
                            <h2 class="positive">Thanks for trying out this wizard!</h2>
                        </div>
                        <div class="item item-text-wrap">
                            <p>
                                Click the buttons above
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </ion-slide>
        <ion-slide ion-wizard-step condition="wizard.something" class="has-header">
            <div class="row">
                <div class="col col-center">
                    <div class="item item-input-inset">
                        <label class="item item-input-wrapper">
                            <i class="icon ion-search placeholder-icon"></i>
                            <input type="text" placeholder="Type something" ng-model="wizard.something" autocomplete="off">
                        </label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col col-center">
                    <div class="card rounded" ng-show="wizard.something">
                        <div class="item">
                            <h2 class="positive">Now you can move on! Click on the next button.</h2>
                        </div>
                    </div>
                </div>
            </div>
        </ion-slide>
        <ion-slide ion-wizard-step class="has-header">
            <div class="row">
                <div class="col col-center">
                    <h3 class="positive">Thanks for completing the wizard!</h3>
                    <p>You can start using the app</p>
                </div>
            </div>
        </ion-slide>
    </ion-slide-box>

</ion-view>