<div ng-controller="Umbraco.Starterkit.Tours.ValidateTextController as vm">
    
    <umb-tour-step on-close="model.endTour()">
            
        <umb-tour-step-header
            title="model.currentStep.title">
        </umb-tour-step-header>
        
        <umb-tour-step-content
            content="model.currentStep.content">
            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">
                <span ng-if="!model.currentStep.customProperties.validateText">Please fill out the field</span>
                <span ng-if="model.currentStep.customProperties.validateText">Please enter <span class="bold">{{ model.currentStep.customProperties.validateText }}</span> in the field</span>
            </div>
        </umb-tour-step-content>

        <umb-tour-step-footer class="flex justify-between items-center">

            <umb-tour-step-counter
                current-step="model.currentStepIndex + 1"
                total-steps="model.steps.length">
            </umb-tour-step-counter>

            <div>
                <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
            </div>

        </umb-tour-step-footer>

    </umb-tour-step>
    
</div>