{% load static %} 
{% include 'web/auth/header.html' %}

<div class="container">

    <div class="card o-hidden border-0 shadow-lg my-5">
        <div class="card-body p-0">
            <!-- Nested Row within Card Body -->
            <div class="row">
                <div class="col-lg-2"></div>
                <div class="col-lg-8">
                    <div class="p-5">
                        <div class="text-center">
                            <img src="{% static 'Images/assets/logo.png' %}" style="text-align:center; width:70px; height:70px;" class='my-2'/>

                            <h1 class="h4 text-gray-900 mb-4">Create an Account!</h1>
                        </div>
                        <form method="POST" class="user">
                            {% csrf_token %}
                            {% include 'web/message.html' %}
                            {% comment "" %}--------------------------------------------------------{% endcomment %}
                            <div class="row">
                                <div class="form-group col-6">
                                    {{forms.first_name}}
                                    <b style="color:red;">{{ forms.errors.first_name }}</b>
                                </div>

                                <div class="form-group col-6">
                                    {{forms.last_name}}
                                    <b style="color:red;">{{ forms.errors.last_name }}</b>
                                </div>
                                <div class="form-group col-12">
                                    {{forms.email}}
                                    <b style="color:red;">{{ forms.errors.email }}</b>
                                </div>
                                <div class="form-group col-6">
                                    {{forms.password}}
                                    <b style="color:red;">{{ forms.errors.password }}</b>
                                </div>
                                <div class="form-group col-6">
                                    {{forms.confirm_password}}
                                    <b style="color:red;">{{ forms.errors.confirm_password }}</b>
                                </div>

                                <div class="form-group col-12">
                                    <div class="selectdiv ">
                                        {{forms.country_id}}
                                    </div>
                                    
                                    {% comment %} <b style="color:red;">{{ forms.errors.confirm_password }}</b> {% endcomment %}
                                </div>

                                <div class="form-group col-12">
                                    <input type="submit" name="submit" id="submit" class="btn btn-primary btn-user btn-block" value="Create Account"/>
                                </div>
                            </div>

                           
                        </form>
                        <hr>
                        {% comment %} <div class="text-center">
                            <a class="small" href="{% url 'web:forgot_password' %}">Forgot Password?</a>
                        </div> {% endcomment %}
                        <div class="text-center">
                            <a class="small" href="{% url 'web:user_login' %}" style="font-size:15px;">Already have an account?</a>
                        </div>
                        <div class="col-lg-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<style>
    #id_country_id{
        width: 100%;
        height: calc(2.25em + 0.75rem + 2px);
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #d1d3e2;
        border-radius:25px;
        padding:10px;
    }
    .selectdiv {
        position: relative;
        }

    .selectdiv:after {
        content: "▼";
        font-family: FontAwesome;
        color: black !important;
        right: 15px;
        top: 0px;
        height: 34px;
        padding: 15px 0px 0px 8px;
        position: absolute;
        pointer-events: none;
    }
    select::-ms-expand {
        display: none;
        }
    .selectdiv select {
        width: 100%;
        height: calc(2.25em + 0.75rem + 2px);
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #d1d3e2;
        border-radius:25px;
        padding:10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Add some styling */
        
        display: block;
        width: 100%;
        /* max-width: 320px; */
        /* height: 50px;
        float: right; */
        margin: 5px 0px;
        padding: 0px 24px;
        font-size: 16px;
        line-height: 1.75;
        color: #333;
        background-color: #ffffff;
        background-image: none;
        /* border: 1px solid #0ebeff; */
        -ms-word-break: normal;
        word-break: normal;
        }
</style>
{% include 'web/auth/footer.html' %}