@extends('backend.static.layouts.formlayouts')

@section('title')
    {{ ___('common.Sign In') }}
@endsection

@section('content')
<!-- main content start -->
<main class="auth-page">
    <section class="auth-container">
        <div
            class="form-wrapper pv-80 ph-100 d-flex justify-content-center align-items-center flex-column">
            <div class="form-container d-flex justify-content-center align-items-start flex-column">
                <div class="form-logo mb-40">
                    <a href="#">
                        <img class="default-logo" src="{{ asset('backend/assets/images/default-logo.png') }}" alt="" />
                        <img class="dark-logo" src="{{ asset('backend/assets/images/dark-logo.png') }}" alt="" />
                    </a>
                </div>
                <!-- form heading  -->
                <div class="form-heading mb-40">
                    <h1 class="title mb-8">{{ ___('common.Log_In') }}</h1>
                    <p class="subtitle mb-0">{{ ___('common.welcome_back_please_login_to_your_account') }}</p>
                </div>
                <!-- Start With form -->

                <!-- social login start -->

                <div class="social-login mb-20">
                    <div class="social-login-item">
                        <a href="https://google.com" class="d-flex justify-content-center align-items-center g-1">
                            <img src="{{ asset('backend/assets/images/icons/google.png') }}" alt="google" />
                            <span class="ml-16">{{ ___('common.continue_with_google') }}</span>
                        </a>
                    </div>
                    <div class="social-login-item facebook-login mt-14">
                        <a href="https://facebook.com" class="d-flex justify-content-center align-items-center g-1">
                            <img src="{{ asset('backend/assets/images/icons/facebook-new.svg') }}" alt="facebook" />
                            <span class="ml-16">{{ ___('common.continue_with_facebook') }}</span>
                        </a>
                    </div>
                </div>

                <!-- social login end  -->

                <p class="login-with-divider-text mb-40">{{ ___('common.or_login_with_email_address') }}</p>

                <form action="#" method="post"
                    class="auth-form d-flex justify-content-center align-items-start flex-column">
                    <!-- username input field  -->
                    <div class="input-field-group mb-20">
                        <label for="username">{{ ___('common.username') }}</label><br />
                        <div class="custom-input-field">
                            <input class="ot-input" type="text" id="username" placeholder="{{ ___('common.enter_your_username') }}" required />
                            <img src="{{ asset('backend/assets/images/icons/username-cus.svg') }}" alt="">
                        </div>
                        <p class="input-error error-warning">{{ ___('common.please_enter_at_least_6_character') }}</p>
                    </div>
                    <!-- password input field  -->
                    <div class="input-field-group">
                        <label for="password">{{ ___('common.password') }}</label><br />
                        <div class="custom-input-field password-input">
                            <input class="ot-input" type="password" id="password" placeholder="******************" required />
                            <i class="lar la-eye"></i>
                            <img src="{{ asset('backend/assets/images/icons/lock-cus.svg') }}" alt="">
                        </div>
                        <p class="input-error error-danger">{{ ___('common.this_area_required') }}</p>
                    </div>
                    <!-- Remember Me and forget password section start -->
                    <div class="d-flex justify-content-between w-100 mt-20">
                        <!-- Remember Me input field  -->
                        <div class="remember-me input-check-radio">
                            <div class="form-check d-flex align-items-center">
                                <input class="form-check-input" type="checkbox" name="rememberMe" id="rememberMe" />
                                <label for="rememberMe">{{ ___('common.remember_me') }}</label>
                            </div>
                        </div>
                        <!-- Forget Password link  -->
                        <div>
                            <a class="forgot-password" href="{{url('reset-password')}}">{{ ___('common.forgot_password') }}</a>
                        </div>
                    </div>
                    <!-- Remember Me and forget password section end -->
                    <!-- submit button  -->
                    <button type="submit" class="submit-btn pv-16 mt-32 mb-20" value="Sign In">
                    {{ ___('common.sign_in') }}
                    </button>
                </form>
                <!-- End form -->
                <p class="authenticate-now mb-0">
                {{ ___('common.dont_have_an_account') }}
                    <a class="link-text" href="{{url('/signup')}}"> {{ ___('common.create_an_account') }}</a>
                </p>

                <div class="privacy-policy-navigation mt-24">
                    <a href="#">{{ ___('common.privacy_policy') }}</a>
                    <span>.</span>
                    <a href="#">{{ ___('common.term_of_use') }}</a>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- main content end -->
@endsection