{{--
    Sign-in / sign-up / password pages: the template's appointment section (intro column + form-wrap1 card).
    Pages set 'auth_title' (breadcrumb), 'auth_form' (the card) and optionally 'auth_js'.
--}}
@extends('web_site.layouts.master')

@section('content')
    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">@yield('auth_title')</h1>
        </div>
    </section>

    <section class="appointment-wrapper auth-area space-top space-md-bottom">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6 mb-30 order-2 order-xl-1">
                    <div class="about-content">
                        <span class="sec-subtitle text-theme1 h3 mb-2">{{ ($siteData ?? null)?->name ?: 'BST Clinics' }}</span>
                        <h2 class="h1 mb-3">{{ trans('site.auth.intro_title') }}</h2>
                        <p class="mb-4">{{ trans('site.auth.intro_text') }}</p>
                        <ul class="auth-benefits">
                            <li><i class="far fa-calendar-check"></i>{{ trans('site.auth.benefits.book') }}</li>
                            <li><i class="far fa-file-medical-alt"></i>{{ trans('site.auth.benefits.follow') }}</li>
                            <li><i class="far fa-comments"></i>{{ trans('site.auth.benefits.chat') }}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-6 mb-30 order-1 order-xl-2">
                    @yield('auth_form')
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    @include('web_site.auth.partials.password-toggle-js')
    @yield('auth_js')
@endsection