@section('title', __('reg_form.title_' . $step))
<div>
    <div class="modal-header">
        <h5 class="modal-title --medium_title">{{ __('reg_form.registration') }}</h5>
    </div>
    <div step-item class="modal-body">
        <div class="row">
            <div class="col-6 @error('first_name') verror @enderror">
                <label for="first_name" class="ms-3 fw-bold">{{ __('reg_form.first_name') }}</label>
                <input type="text" id="inputFirstName" name="first_name" wire:model="first_name" class="form-control" placeholder="{{ __('reg_form.first_name') }}" required="" />
                @if($errors->has('first_name'))
                <div class="verror-message">{{ $errors->first('first_name') }}</div>
                @endif
            </div>
            <div class="col-6 @error('last_name') verror @enderror">
                <label for="last_name" class="ms-3 fw-bold">{{ __('reg_form.last_name') }}</label>
                <input type="text" id="inputLastName" name="last_name" wire:model="last_name" class="form-control" placeholder="{{ __('reg_form.last_name') }}" required="" />
                @if($errors->has('last_name'))
                <div class="verror-message">{{ $errors->first('last_name') }}</div>
                @endif
            </div>
        </div>

        <div class="row mx-1 @error('email') verror @enderror">
            <label for="email" class="mt-3 fw-bold">{{ __('reg_form.email') }}</label>
            <input type="email" autocomplete="email" id="inputEmail" name="email" wire:model="email" class="form-control " placeholder="{{ __('reg_form.login') }}" required="" />
            @if($errors->has('email'))
            <div class="verror-message">{{ $errors->first('email') }}</div>
            @endif
        </div>

        <div class="row mx-1 @error('password') verror @enderror">
            <label for="password" class="mt-3 fw-bold">{{ __('reg_form.password') }}</label>
            <input type="password" id="inputPassword" name="password" wire:model="password" class="form-control " placeholder="{{ __('reg_form.password') }}" required="" />

            <label for="password_confirmation" class="mt-3 fw-bold">{{ __('reg_form.password_confirmation') }}</label>
            <input type="password" id="inputPassword_confirmation" name="password_confirmation" wire:model="password_confirmation" class="form-control " placeholder="{{ __('reg_form.password_confirmation') }}" required="" />
            @if($errors->has('password'))
            <div class="verror-message">{{ $errors->first('password') }}</div>
            @endif
        </div>

        <div class="row mx-1  --with_arr @error('birthdate') verror @enderror">
            <label for="birthdate" class="text-center --f_bold mt-3">{{ __('reg_form.date_of_birth') }}</label>
            <!-- http://t1m0n.name/air-datepicker/docs/index-ru.html -->
            <input type="date" id="birthdate" name="birthdate" data-position='bottom left' wire:model="birthdate" data-date-format="yyyy-mm-dd" class="form-control text-center --f_bold" value="" required="" autocomplete="off" />
            <span></span>
            @if($errors->has('birthdate'))
            <div class="verror-message">{{ $errors->first('birthdate') }}</div>
            @endif
        </div>

        <div class="my-3 text-center --f_bold">{{ __('reg_form.gender') }}</div>
        <div class="btn-group mb-3 d-flex justify-content-center --roundredRadioButtons">
            <input type="radio" class="btn-check" name="gender" wire:click="$set('gender', 'male')" id="genderM" autocomplete="off" checked value="male" />
            <label class="btn btn-x btn-primary" for="genderM">{{ __('reg_form.male') }}</label>

            <input type="radio" class="btn-check" name="gender" wire:click="$set('gender', 'female')" id="genderF" autocomplete="off" value="female" />
            <label class="btn btn-lg btn-primary" for="genderF">{{ __('reg_form.female') }}</label>
        </div>

        @if($errors->has('gender'))
        <span class="alert alert-danger">{{ $errors->first('gender') }}</span>
        @endif

        <p class="--max_small --f_grey lh-1">{{ __('reg_form.confirm_t1') }} <a href="#" class="--f_black">{{ __('reg_form.confirm_t2') }}</a>, <a href="#" class="--f_black">{{ __('reg_form.confirm_t3') }}</a> {{ __('reg_form.confirm_t4') }} <a href="#" class="--f_black">{{ __('reg_form.confirm_t5') }}</a>{{ __('reg_form.confirm_t6') }}</p>

        <button class="btn btn-lg btn-primary btn-block w-100 --f_bolder text-uppercase" type="button" next-step wire:click="nextStep">{{ __('reg_form.registration') }}</button>
    </div>
</div>