<app-header></app-header>
<div align="center">
	<mat-card class="centercard">
		<h3>{{ vE.businessSignupTitle }}</h3>
		<mat-vertical-stepper #stepper [linear]="true">
			<mat-step label="{{ vE.businessBizInfo }}" [stepControl]="bizForm" editable="false">
				<p>{{ vE.businessAddrsNobiz }}</p>
				<mat-card [formGroup]="bizForm">
					<mat-form-field appearance="outline" [style.width.px]=300>
						<mat-label>{{ vE.businessBizNamelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizNameholder }}" formControlName="name">
					</mat-form-field>
					<br>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessContactFnamelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessContactFnholder }}" formControlName="first">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessContactLnamelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessContactLnholder }}" formControlName="last">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizAddresslbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizAddressholder }}" formControlName="street">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizCitylbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizCityholder }}" formControlName="city">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizStatelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizStateholder }}" formControlName="state">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizPcodelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizPcodeholder }}" formControlName="postal">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizCountrylbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizCountryholder }}" formControlName="country" [matAutocomplete]="auto">
						<mat-autocomplete #auto="matAutocomplete">
							<mat-option *ngFor="let ctry of countries | searchOptions:bizForm.get('country')!.value" [value]="ctry.name">
								{{ctry.name}}
							</mat-option>
						</mat-autocomplete>
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizMaillbl }}</mat-label>
						<input matInput type="email" placeholder="{{ vE.businessBizMailholder }}" formControlName="email">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessBizWebsitelbl }}</mat-label>
						<input matInput placeholder="{{ vE.businessBizWebsiteholder }}" formControlName="website">
					</mat-form-field>
					<mat-slide-toggle (change)="onChange($event)">
						{{ vE.businessAcceptTerms }} <a class="link" (click)="showTerms()">{{ vE.businessTermsOfuse }}</a>
					</mat-slide-toggle>
					<mat-card-actions>
						<button mat-raised-button color="primary" [disabled]="bizForm.invalid || !termsChecked" (click)="save()">{{ vE.businessSaveBtn }}</button>
					</mat-card-actions>
				</mat-card>

			</mat-step>
			<mat-step label="{{ vE.businessSessionLengthlbl }}" editable="false">
				<p>{{ vE.businessSelectSession }}</p>
				<mat-card [formGroup]="payForm">
					<mat-form-field appearance="outline">
						<mat-label>{{ vE.businessSessionLabel }}</mat-label>
						<mat-select formControlName="session">
							<mat-option *ngFor="let ticket of tickets" [value]="ticket.value">
								{{ticket.viewValue}}
							</mat-option>
						</mat-select>
					</mat-form-field>
					<mat-card-actions>
						<button mat-raised-button color="primary" [disabled]="payForm.invalid" (click)="pay()">{{ vE.businessSessionPaylbl }}</button>
					</mat-card-actions>
				</mat-card>
			</mat-step>
			<mat-step label="{{ vE.businessZGoConfirmlbl }}" editable="false">
				<p>{{barMessage}}</p>
				<mat-progress-bar
					[mode]="barMode"
					[value]="barValue">
				</mat-progress-bar>
			</mat-step>

		</mat-vertical-stepper>
	</mat-card>
</div>
