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

@section('title')
    {{ ___('common.Sign Up') }}
@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="{{ route('dashboard') }}">
                        <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.create_account') }}</h1>
                    <p class="subtitle mb-0">{{ ___('common.sign_up_message') }}</p>
                </div>
                <!-- Start With form -->

                <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>
                    </div>
                    <!-- email input field  -->
                    <div class="input-field-group mb-20">
                        <label for="email">{{ ___('common.email') }}</label><br />
                        <div class="custom-input-field">
                            <input class="ot-input" type="text" id="email" placeholder="{{ ___('common.enter_your_email') }}" required />
                            <img src="{{ asset('backend/assets/images/icons/email-cus.svg') }}" alt="">
                        </div>
                        <p class="input-error error-warning">{{ ___('common.please_enter_at_least_6_character') }}</p>
                    </div>
                    <!-- email input field  -->
                    <div class="input-field-group mb-20">
                        <label for="email">{{ ___('common.birthday') }}</label><br />
                        <div class="custom-input-field">
                            <input class="ot-input" type="date" id="email" placeholder="{{ ___('common.enter_your_birthday') }}" required />
                            <img src="{{ asset('backend/assets/images/icons/calender.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 password-input mb-20">
                        <label for="password">{{ ___('common.password') }}</label><br />
                        <div class="custom-input-field">
                            <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>

                    <!-- password input field  -->
                    <div class="input-field-group password-input">
                        <label for="password">{{ ___('common.confirm_password') }}</label><br />
                        <div class="custom-input-field">
                            <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>

                    <!-- submit button  -->
                    <button type="submit" class="submit-btn pv-16 mt-20 mb-20" value="Sign In">
                        {{ ___('common.sign_in') }}
                    </button>
                </form>
                <!-- End form -->
                <p class="authenticate-now mb-0">
                    {{ ___('common.already_have_an_account') }}
                    <a class="link-text" href="{{url('/signin')}}"> {{ ___('common.login_here') }}</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