@extends('EcomAuthViews::layouts.authentication.layout',[ "heightAdjuster" => (session('guest')==1) ? 80 : 400 ])

@section('content')
    @php
        $country_code = country()->code();

    @endphp
    <form class="twa-form disable-on-submit" method="POST" id="otp-form">
        @csrf

        <div class="otp-sent-wrapper">
            @foreach($auth_by as $auth)
                <div class="entered-email">
                    @include('EcomAuthViews::icons.'.$auth['icon'])
                    <span>{{$auth["value"] }}.@if($loop->last)
                            <a style="text-decoration: underline" href="{{route('account-auth', ['type_slug' => $type_slug] )}}"> Choose another </a>
                           @endif
                    </span>
                </div>
            @endforeach
        </div>

        @component('EcomGeneralViews::components.form.input', [ "parentClass" => "", "size" => "full", "type" => "text", "label" => ___('authentication.enter_password') ])
            <div class="password-group">
                <input type="password" name="password" required
                       placeholder="{{ ___('authentication.enter_password') }}"></input>
                <button type="button" onclick="togglePassword($(this))"><i class="fa-solid fa-eye"></i></button>
            </div>
            <span class="invalid-field"> @error('password') {{$message}}  @enderror </span>

            <div style="margin-bottom:15px"> Forgot Password? <a style="text-decoration: underline ; "
                                                                 href="{{route('request-reset-password' , ['type_slug' => $type_slug ])}}">
                    Reset </a></div>


            <button  class="submit" type="submit" style="margin-top:10px" >{{ ___('authentication.login') }} </button>
        @endcomponent


    </form>

@endsection
@section('scripts')

    <style>
        .otp-sent-wrapper {
            width: 100%;
        }

        .entered-email {
            display: flex;
            justify-content: flex-start;
            width: 100%;
        }
    </style>



@endsection