@extends('layouts.auth')

@section('content')
<div class="empty-wrapper">
	<div class="close-modal x-close">X</div>
	<div class="">
		  
		  <main class="main">
		    <h3 class="mb-2">Log in to continue</h3>
		    <p class="mb-4">Don't have an account? <a data-href="{{ route('app_register') }}" href="#" class="api-get-plain">Sign Up</a></p>

		    <form class="login-form" action="{{ route('app_login') }}" method="POST">
		    	@csrf
		    	<div class="error-bag"></div>
		      <div class="row">

		        <div class="col-sm-12 mb-2">
		          <div class="form-group">
		            <label for="email">Email Address</label>
		            <input type="email" name="email" class="login-input login-form-control" id="email" placeholder="Enter email address">
		          </div>
		        </div>

		        <div class="col-sm-12 mb-2">
		          <div class="form-group">
		            <label for="password">Password</label>
		            <input type="password" name="password" class="login-input login-form-control" id="password" placeholder="Enter password">
		          </div>
		        </div>

		        <div class="col-sm-12 mb-2">
		          <button type="submit" name="submit" class="login-btn btn-primary w-100">Log in</button>
		        </div>

		        {{-- <div class="col-sm-12 mb-2 text-center position-relative pt-2 pb-3 px-0">
		          <hr class="mw-100 position-absolute z-index-100" style="width:calc(100% - 30px);margin-left:15px;">
		          <small class="px-3 background--light position-relative z-index-105">Or sign in with:</small>
		        </div>

		        <div class="col-sm-4 mb-2 login-btn-brand-container" style="padding-left: 15px;">
		          <a href="{{ route('socialLogin', ['provider' => 'facebook']) }}" class="login-btn login-btn-brand login-btn-facebook w-100" style="background-color: #3f5d94"><i class="fa fa-facebook mr-1"></i> Facebook</a>
		        </div>

		        <div class="col-sm-4 mb-2 login-btn-brand-container">
		          <a href="{{ route('socialLogin', ['provider' => 'twitter']) }}" class="login-btn login-btn-brand login-btn-twitter w-100"><i class="fa fa-facebook mr-1"></i> Twitter</a>
		        </div> --}}

		        {{-- <div class="col-sm-4 mb-2 login-btn-brand-container" style="padding-right: 15px;">
		          <a href="{{ route('socialLogin', ['provider' => 'google']) }}" class="login-btn login-btn-brand login-btn-google-white border w-100">
		            <figure class="d-inline-block mr-1 mb-0">
		              <svg viewBox="0 0 48 48" width="16" height="16" class="google-icon display-block" data-reactid="93">
		                <defs data-reactid="94">
		                  <clipPath id="clip-path" data-reactid="95">
		                    <path fill="none" d="M44.5,20H24v8.5H35.8C34.7,33.9,30.1,37,24,37a13,13,0,0,1,0-26,12.72,12.72,0,0,1,8.1,2.9l6.4-6.4A22,22,0,1,0,24,46c11,0,21-8,21-22A18.25,18.25,0,0,0,44.5,20Z" data-reactid="96"></path>
		                  </clipPath>
		                </defs>
		                <g clip-path="url(#clip-path)" data-reactid="97">
		                  <path style="fill:#fbbc05;" d="M0,37V11L17,24Z" data-reactid="98"></path>
		                </g>
		                <g clip-path="url(#clip-path)" data-reactid="99">
		                  <path style="fill:#ea4335;" d="M0,11,17,24l7-6.1L48,14V0H0Z" data-reactid="100"></path>
		                </g>
		                <g clip-path="url(#clip-path)" data-reactid="101">
		                  <path style="fill:#34a853;" d="M0,37,30,14l7.9,1L48,0V48H0Z" data-reactid="102"></path>
		                </g>
		                <g clip-path="url(#clip-path)" data-reactid="103">
		                  <path style="fill:#4285f4;" d="M48,48,17,24l-4-3L48,11Z" data-reactid="104"></path>
		                </g>
		              </svg>
		            </figure>
		            Google
		          </a>
		        </div> --}}

		      </div>
		    </form>
		  </main>

		  <footer class="mt-6">
		    <small>&copy; 2021 - Cravvings. All rights reserved.</small>
		  </footer>
		</div>
</div>

@endsection