<template>
  <div class="page page-signup c_auth page-auth no-toolbar" data-name="signup">
    <div class="page-content">
      <div class="page-header">
        <h1>SignUp</h1>
      </div>
      <form class="auth-form">
        <div class="list m-0">
          <ul class="no-pseudo no-bg">
            <li class="item-content item-input form-block">
              <div class="item-inner no-pseudo flex-row jc-sb">
                <input type="radio" name="i-am-a-" id="student" checked="checked" />
                <label class="radio" for="student">
                  <p>I am a</p>
                  <span>STUDENT</span>
                  <i class="check-icon">
                    <span class="purpose-check">
                    </span>
                  </i>
                </label>
                <input type="radio" name="i-am-a-" id="tutor" />
                <label class="radio" for="tutor">
                  <p>I am a</p>
                  <span>TUTOR</span>
                  <i class="check-icon">
                    <span class="purpose-check">
                    </span>
                  </i>
                </label>
              </div>
            </li>
            <li class="item-content item-input form-block">
              <div class="item-inner no-pseudo">
                <label>Username</label>
                <div class="item-input-wrap">
                  <input type="text" name="username" placeholder="alisha" />
                  <span class="input-clear-button">
                  </span>
                </div>
              </div>
            </li>
            <li class="item-content item-input form-block">
              <div class="item-inner no-pseudo">
                <label>Email</label>
                <div class="item-input-wrap">
                  <input type="text" name="username" placeholder="alishachenoy@example.com" />
                  <span class="input-clear-button">
                  </span>
                </div>
              </div>
            </li>
            <li class="item-content item-input form-block">
              <div class="item-inner">
                <label>Create Password</label>
                <div class="item-input-wrap posr">
                  <input type="password" name="password" placeholder="*********" />
                  <span class="input-clear-button">
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="list m-0">
          <ul class="no-pseudo no-bg">
            <li>
              <a href="/login/" class="auth-btn link">CREATE ACCOUNT</a>
            </li>
            <li class="social-auth text-center">
              <p>or Sign Up with</p>
              <a href="#">
                <img src="https://osumstudio.com/envato/purposeapp/img/icons/google.svg" />
                <span>Google</span>
              </a>
              <a href="#">
                <img src="https://osumstudio.com/envato/purposeapp/img/icons/facebook.svg" />
                <span>Facebook</span>
              </a>
            </li>
          </ul>
          <div class="block-footer">
            <p class="text-center">Already a User?
              <a href="/login/">Login</a>
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>