<template>

  <div>

    <MDBStepper ref="formWizardRef" linear>

      <MDBStepperForm>

        <MDBStepperStep active>

          <MDBStepperHead icon="1"> Access Code </MDBStepperHead>

          <MDBStepperContent

            id="access-code-form"

            tag="form"

          >

            <MDBInput

              id="RegisterAccessCode"

              v-model="RegisterAccessCode"

              type="text"

              label="Access Code"

              wrapperClass="mb-4"

              required

            />

          </MDBStepperContent>

        </MDBStepperStep>

        <MDBStepperStep>

          <MDBStepperHead icon="2"> Account Details </MDBStepperHead>

          <MDBStepperContent

            id="register-form"

            tag="form"

          >

            <div class="text-center mb-3">

              <p>Sign up with:</p>

              <MDBBtn

                color="primary"

                floating

                class="mx-1"

                style="background-color: rgb(59, 89, 152)"

              >

                <MDBIcon iconStyle="fab" icon="facebook-f" />>

              </MDBBtn>

​

              <MDBBtn

                color="primary"

                floating

                class="mx-1"

                style="background-color: rgb(221, 75, 57)"

              >

                <MDBIcon iconStyle="fab" icon="google" />

              </MDBBtn>

​

              <MDBBtn

                color="primary"

                floating

                class="mx-1"

                style="background-color: rgb(126, 31, 255)"

              >

                <MDBIcon iconStyle="fab" icon="yahoo" />

              </MDBBtn>

​

              <MDBBtn

                color="primary"

                floating

                class="mx-1"

                style="background-color: rgb(0, 120, 212)"

              >

                <MDBIcon iconStyle="fab" icon="microsoft" />

              </MDBBtn>

            </div>

​

            <p class="text-center">or:</p>

​

            <!-- Username input -->

            <MDBInput

              id="RegisterFirstName"

              v-model="RegisterFirstName"

              type="text"

              label="First Name"

              wrapperClass="mb-4"

              required

            />

            <MDBInput

              id="RegisterLastName"

              v-model="RegisterLastName"

              type="text"

              label="Last Name"

              wrapperClass="mb-4"

              required

            />

​

            <!-- Email input -->

            <MDBInput

              id="RegisterEmail"

              v-model="RegisterEmail"

              type="email"

              label="Email"

              wrapperClass="mb-4"

              required

            />

​

            <!-- Password input -->

            <MDBInput

              id="RegisterPassword"

              v-model="RegisterPassword"

              type="password"

              label="Password"

              wrapperClass="mb-4"

              required

            />

​

            <!-- Repeat Password input -->

            <MDBInput

              id="RegisterPasswordRepeat"

              v-model="RegisterPasswordRepeat"

              type="password"

              label="Repeat password"

              wrapperClass="mb-4"

            />

​

            <!-- Checkbox -->

            <div class="form-check d-flex justify-content-center mb-4">

              <MDBCheckbox

                id="RegisterTermsCheck"

                v-model="RegisterTermsCheck"

                wrapperClass="d-flex justify-content-center mb-0"

                required

                class="form-check-input me-2"

              />

              <label

                class="form-check-label"

                for="RegsiterTermsCheck"

                :style="validationClass"

              >

                I have read and agree to the

                <a href="/terms-and-conditions" target="_blank">

                  terms and conditions

                </a>

              </label>

            </div>

          </MDBStepperContent>

        </MDBStepperStep>

      </MDBStepperForm>

    </MDBStepper>

    <div class="d-flex justify-content-center px-3">

      <MDBBtn

        color="primary"

        class="w-100 me-2"

        @click="$refs.formWizardRef.prevStep()"

      >

        Previous step

      </MDBBtn>

      <MDBBtn

        color="primary"

        class="w-100"

        @click="$refs.formWizardRef.nextStep()"

      >

        Next step

      </MDBBtn>

​

    </div>

  </div>

</template>