{% extends "base.min.html" %}
{% block container %}
<div class="container  regi">
    <div class="row h-100 justify-content-center align-items-center">

        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card o-hidden border-0 shadow-lg my-5 ">
                <div class="card-body p-0">
                    <div class="row ">
                        {% if SETTINGS.register_page_image %}
                        <div class="col-lg-5 d-none d-lg-block bg-register-image" style="background-image: url({{MEDIA_URL}}/settings/{{SETTINGS.register_page_image}});"></div>
                        {% else %}
                        <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
                        {% endif %}

                        <div class="col-lg-7">
                            <div class="p-4">
                                <div class="action-logo">
                                    {% if THEME == 'light' or THEME == 'default' %}
                                        {% if SETTINGS.light_theme_logo %}
                                            <img class="" src="{{MEDIA_URL}}/settings/{{SETTINGS.light_theme_logo}}">
                                        {% elseif SETTINGS.logo %}
                                            <img class="" src="{{MEDIA_URL}}/settings/{{SETTINGS.logo}}">
                                        {% else %}
                                            <img class="" src="{{STATIC_URL}}/img/logo.png">
                                        {% endif %}
                                    {% else %}
                                        {% if SETTINGS.logo %}
                                            <img class="" src="{{MEDIA_URL}}/settings/{{SETTINGS.logo}}">
                                        {% else %}
                                            <img class="" src="{{STATIC_URL}}/img/logo.png">
                                        {% endif %}
                                    {% endif %}
                                </div>

                                <div class="text-center">
                                    <h1 class="h4 text-gray-900 mb-4">{{ _("Create an Account!") }}</h1>
                                </div>
                                {{ msg() }}
                                <form class="user" method="POST">
                                    {{ csrf_token()|raw }}
                                    <div class="form-group row">
                                        <div class="col-sm-6 mb-3 mb-sm-0">
                                            <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">
                                            <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="form-group">
                                        <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="form-group">
                                        <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="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="">{{_("Birthday")}}</span>
                                        </div>
                                        <div class="date-dropdown w-auto">
                                            <input type="hidden" class="form-control form-control-user dob" id="dob" name="dob" value="{{dob}}" placeholder="{{_('Birthday')}}">
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if SETTINGS.register_sex %}
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="">{{_("Gender")}} </span>
                                        </div>
                                        <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="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="">{{_("Country")}}</span>
                                        </div>
                                        <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="form-group row">
                                        <div class="col-sm-6 mb-3 mb-sm-0">
                                            <input type="password" required="required" class="form-control form-control-user" autocomplete="false" id="password" name="password" placeholder="{{ _('Password') }}">
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="password" required="required" 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="btn btn-primary btn-user btn-block">
                                        {{ _('Register Account') }}
                                    </button>
                                </form>
                                <hr>
                                <div class="text-center">
                                    <a class="small" href="{{ url('login') }}"><i class="fa fa-sign-in-alt"></i> {{_("Already have an Account? Login!")}}</a>
                                </div>
                                <hr>
                                <div class="text-center">
                                    <a class="small" href="{{ url('index') }}"><i class="fa fa-home"></i> {{_("Home")}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
