Default.dothtml

@viewModel Web.ViewModels.DefaultViewModel, Web
@masterPage Views/Site.dotmaster

<dot:Content ContentPlaceHolderID="Body">
    <div DataContext="{value: Wizard}">
        <div class="container mt-3" IncludeInPage="{value: NavigationVisible}">
            <div class="row">
                <div class="col-md-2">
                    <bs:Button ButtonTagName="button" Click="{command:  _root.OnPreviousClick()}" Enabled="{value: PreviousButtonEnabled}" IncludeInPage="{value: PreviousButtonVisible}" Type="Light">
                        Previous Button
                    </bs:Button>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-3">
                            Step {{value: Step}} out of {{value: Total}}.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <bs:ProgressBar Color="Primary" VisualStyle="AnimatedStriped" Value="{value: Percentage}" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            {{value: Percentage.ToString("#.##")}}% Complete
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <bs:Button ButtonTagName="button" Click="{command: _root.OnNextClick()}" Enabled="{value: NextButtonEnabled}" IncludeInPage="{value: NextButtonVisible}" IsSubmitButton="true" Type="Primary">
                        Next Button
                    </bs:Button>
                </div>
            </div>
        </div>
        <div class="container mt-3">
            <div class="row">
                <div class="offset-md-2 col-md-8">
                    <h5 class="text-muted">{{value: Title}}</h5>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div IncludeInPage="{value: Wizard.Step == 1}">
                    <div DataContext="{value: First}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</dot:Content>