{#
/*
 * Copyright © ProgramCMS. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Developed by Mohamed EL QUCHIRI <elquchiri@gmail.com>
 */
#}
<section class="h-100 mb-5">
    <header class="container h-100">
        <div class="d-flex align-items-center justify-content-center h-100">
            <div class="d-flex flex-column">
                <div class="card" style="border: none">
                    <div class="card-body" style="width: 29rem;">
                        <h2>{{ block.trans('Create an Account') }}</h2>
                        <p class="mb-5" style="color: #888888">{{ block.trans('Join our Community.') }}</p>
                        <form method="POST" action="{{ block.getSubmitUrl() }}" id="user_authentication_register">
                            <div class="mb-3">
                                <label for="email" class="form-label fw-bold">
                                    {{ block.trans('Email') }}
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="email" id="email" name="email" class="form-control" value="{{ block.getUser().getEmail() }}" autofocus/>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label fw-bold">
                                    {{ block.trans('Password') }}
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="password" id="password" name="password" class="form-control" />
                            </div>
                            <div class="mb-3">
                                <label for="user_firstname" class="form-label fw-bold">{{ block.trans('Full Name') }}</label>
                                <span class="text-danger">*</span>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="user_firstname" name="user_firstname" placeholder="{{ block.trans('First Name') }}" value="{{ block.getUser().getUserFirstName() }}">
                                    <input type="text" class="form-control" id="user_lastname" name="user_lastname" placeholder="{{ block.trans('Last Name') }}" value="{{ block.getUser().getUserLastName() }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="user_lastname" class="form-label fw-bold">{{ block.trans('Country') }}</label>
                                <span class="text-danger">*</span>
                                <select id="user_country" name="user_country" class="form-select">
                                    {{ block.getCountries()|raw }}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="username" class="form-label fw-bold">
                                    {{ block.trans('User Name') }}
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" id="username" name="username" class="form-control" value="{{ block.getUser().getUsername() }}" />
                                <div id="userNameHelp" class="form-text">
                                    {{ block.trans('This will be your identifier in the website.') }}
                                </div>
                            </div>

                            {{ block.getChildHtml()|raw }}

                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">
                                    {{ block.getRulesAndPolicy()|raw }}
                                </label>
                            </div>
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                            <div class="mt-5">
                                <button type="submit" class="btn btn-primary btn-block fw-bold" style="width: 100%;">
                                    {{ block.trans('Create My Account') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </header>
</section>
