{% extends "base.auth.html" %}
{% block container %}
<div class="row g-0 flex-fill">
    <div class="col-12 col-lg-6 col-xl-4 d-flex flex-column justify-content-center">
        <div class="container container-tight my-5 px-lg-5">
            <div class="text-center mb-2">
                {% include "logo.html" %}
            </div>
            <h2 class="h3 text-center mb-4">
                {{ _("Create an account to joing with the community") }}
            </h2>
            {{ msg() }}
            <form class="user" method="POST">
                {{ csrf_token()|raw }}
                <div class="mb-3 row">
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <label class="form-label">First name</label>
                        <input type="text" required="required" class="form-control form-control-user" id="first_name" name="first_name" placeholder="{{ _('First Name') }}" value="{{first_name}}">
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label">Last name</label>
                        <input type="text" required="required" class="form-control form-control-user" id="last_name" name="last_name" placeholder="{{ _('Last Name') }}" value="{{last_name}}">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Username</label>
                    <input type="text" required="required" class="form-control form-control-user" id="user_name" name="user_name" placeholder="{{ _('Username') }}" value="{{user_name}}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email address</label>
                    <input type="email" required="required" class="form-control form-control-user" id="email" name="email" placeholder="{{ _('Email Address') }}" value="{{email}}">
                </div>

                {% if SETTINGS.register_dob %}
                <div class="mb-3">
                    <label class="form-label">{{_('Birthday')}}</label>
                    <span class="d-flex w-auto">
                        <input type="hidden" class="form-control form-control-user dob" id="dob" name="dob"
                            value="{{dob}}" placeholder="{{_('Birthday')}}">
                    </span>
                </div>
                {% endif %}

                {% if SETTINGS.register_sex %}
                <div class="mb-3">
                    <label class="form-label">{{_('Gender')}}</label>
                    <select class="form-control form-control-user" id="sex" name="sex">
                        <option value="1" {% if sex == 1 %}selected{% endif %}>{{_("Male")}}</option>
                        <option value="2" {% if sex == 2 %}selected{% endif %}>{{_("Female")}}</option>
                        <option value="3" {% if sex == 3 %}selected{% endif %}>{{_("Other")}}</option>
                    </select>
                </div>
                {% endif %}
                {% if SETTINGS.register_country %}
                <div class="mb-3">
                    <label class="form-label">{{_('Country')}}</label>
                    <select class="form-control form-control-user select2" id="country" name="country">
                        <option value="">{{_("Country")}}</option>
                        {% for country_code, country_name in country_list %}
                        <option 
                            {% if country_code == country %}selected{% endif %} 
                            {% if auto_country_code == country_code %}selected{% endif %} 
                            value="{{ country_code }}">{{ country_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <input type="hidden" name="timezone" id="auto-timezone">

                <div class="mb-3 row">
                    <div class="col-sm-6 mb-sm-0">
                        <label class="form-label">Password</label>
                        <input type="password" required="required" autocomplete="new-password" class="form-control form-control-user" autocomplete="false" id="password" name="password" placeholder="{{ _('Password') }}">
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label">Re type password</label>
                        <input type="password" required="required" autocomplete="new-password" class="form-control form-control-user" autocomplete="false" id="password_repeat" name="password_repeat" placeholder="{{ _('Repeat Password') }}">
                    </div>
                </div>
                <!-- reCpatcha -->
                {% if SETTINGS.recaptcha_version == 2 %}
                <div class="g-recaptcha" data-sitekey="{{SETTINGS.recaptcha_sitekey}}"></div>
                {% endif %}
                {% if SETTINGS.recaptcha_version == 3 %}
                <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                {% endif %}
                <!-- /reCpatcha -->
                {% if SETTINGS.enable_privacy %}
                    <div class="form-group form-check policy-agree-block">
                        <input type="checkbox" class="form-check-input" name="policy-agree">
                        <label class="form-check-label" for="policy-agree">
                            {{ _("I agree to") }} <a target="_blank" href="{{ url('privacy') }}">{{ _('Privacy Policy') }}</a> 
                            {% if SETTINGS.enable_privacy and SETTINGS.enable_terms %}
                            {{ _("and") }} <a target="_blank" href="{{ url('terms') }}">{{ _("Terms & Conditions") }}</a>
                            {% endif %}
                        </label>
                    </div>
                {% else %}
                    <input type="checkbox" checked style="display:none" class="form-check-input" name="policy-agree">
                {% endif %}
                    
                <button type="submit" class="mt-3 btn w-100 btn-dark btn-user btn-block">
                    {{ _('Register Account') }}
                </button>
            </form>
            <hr>
            <div class="text-center">
                <a class="small" href="{{ url('login') }}"><i class="ti ti-login ti-12"></i> {{_("Already have an account?")}}</a>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
        {% if SETTINGS.register_page_image %}
            <div class="bg-cover h-100 min-vh-100" style="background-image: url({{MEDIA_URL}}/settings/{{SETTINGS.register_page_image}})"></div>
        {% else %}
            <div class="bg-cover h-100 min-vh-100" style="background-image: url({{STATIC_URL}}/img/login.jpg"></div>
        {% endif %}
    </div>
</div>
{% endblock %}