<x-layout bodyClass="bg-gray-200">
  <div class="position-sticky z-index-sticky container top-0">
    <div class="row">
      <div class="col-12">
        <!-- Navbar -->
        <x-navbars.navs.guest
          signin='static-sign-in'
          signup='static-sign-up'
        ></x-navbars.navs.guest>
        <!-- End Navbar -->
      </div>
    </div>
  </div>
  <main class="main-content mt-0">
    <div
      class="page-header align-items-start min-vh-100"
      style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');"
    >
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container my-auto">
        <div class="row">
          <div class="col-lg-4 col-md-8 col-12 mx-auto">
            <div class="card z-index-0 fadeIn3 fadeInBottom">
              <div
                class="card-header position-relative mt-n4 z-index-2 mx-3 p-0"
              >
                <div
                  class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1"
                >
                  <h4
                    class="font-weight-bolder mb-0 mt-2 text-center text-white"
                  >
                    Sign in</h4>
                  <div class="row mt-3">
                    <div class="col-2 ms-auto text-center">
                      <a
                        class="btn btn-link px-3"
                        href="javascript:;"
                      >
                        <i class="fa fa-facebook text-lg text-white"></i>
                      </a>
                    </div>
                    <div class="col-2 px-1 text-center">
                      <a
                        class="btn btn-link px-3"
                        href="javascript:;"
                      >
                        <i class="fa fa-github text-lg text-white"></i>
                      </a>
                    </div>
                    <div class="col-2 me-auto text-center">
                      <a
                        class="btn btn-link px-3"
                        href="javascript:;"
                      >
                        <i class="fa fa-google text-lg text-white"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <form
                  class="text-start"
                  role="form"
                >
                  <div class="input-group input-group-outline my-3">
                    <label class="form-label">Email :</label>
                    <input
                      class="form-control"
                      name="email"
                      type="email"
                      required
                    >
                  </div>
                  <div class="input-group input-group-outline mb-3">
                    <label class="form-label">Password :</label>
                    <input
                      class="form-control"
                      name="password"
                      type="password"
                      required
                    >
                  </div>
                  <div
                    class="form-check form-switch d-flex align-items-center mb-3"
                  >
                    <input
                      class="form-check-input"
                      id="rememberMe"
                      type="checkbox"
                    >
                    <label
                      class="form-check-label mb-0 ms-2"
                      for="rememberMe"
                    >Remember
                      me</label>
                  </div>
                  <div class="text-center">
                    <button
                      class="btn bg-gradient-primary w-100 my-4 mb-2"
                      type="submit"
                    >Sign
                      in</button>
                  </div>
                  <p class="mt-4 text-center text-sm">
                    Don't have an account?
                    <a
                      class="text-primary text-gradient font-weight-bold"
                      href="{{ route('static-sign-up') }}"
                    >Sign
                      up</a>
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <x-footers.guest></x-footers.guest>
    </div>
  </main>

</x-layout>
