@extends('front-end.layout')
@section('title')
    {{ get_label('login', 'Login') }}
@endsection

@section('content')
    <section class="section-py mt-7 py-2">
        <div class="container">
            <h1 class="display-5 fw-semi-bold mt-5 text-center">
                {{ get_label('login_register_heading', 'Login or Register') }}
            </h1>
            <p class="fs-0 fs-md-1 text-center">
                {{ get_label('login_register_subheading', 'Access your account or create a new one to start managing your projects.') }}
            </p>
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="img-container">
                        <lottie-player src="/assets/front-end/img/gallery/Animation - 1712314757629.json"
                            background="transparent" speed="1" class="lottie" loop autoplay>
                        </lottie-player>
                    </div>
                </div>
                <div class="col-md-6 mt-8">
                    <ul class="nav nav-pills nav-justified mb-4" id="auth-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="login-tab" data-bs-toggle="tab" href="#login" role="tab"
                                aria-controls="login" aria-selected="true">{{ get_label('login', 'Login') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="register-tab" data-bs-toggle="tab" href="#register" role="tab"
                                aria-controls="register" aria-selected="false">{{ get_label('register', 'Register') }}</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="auth-tab-content">
                        <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                            <div class="card showcase-page-gradient shadow">
                                <div class="card-body">
                                    <form id="formAuthentication" class="mb-3"
                                        action="{{ route('users.authenticate') }}" method="POST">
                                        @csrf
                                        <div class="mb-3">
                                            <label for="email" class="form-label">{{ get_label('email', 'Email') }} <span
                                                    class="asterisk">*</span></label>
                                            <input type="text" class="form-control" id="email" name="email"
                                                placeholder="{{ get_label('enter_your_email', 'Please enter your email') }}"
                                                value="