{% extends 'dashboard_screen/base.html' %}

{% block content %}

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">
                        <div class="row">

                            <div class="col-lg-12">
                                 <!-- Basic Form Wizard -->

                            	<div class="card-box">
                            		<h4 class="m-t-0 header-title"><b>Add New User</b></h4>

									<form id="add-user-form" action="/dashboard/add_user/" class="form-horizontal" method="post" enctype="multipart/form-data">
                                        {% csrf_token %}
                                        <div>

                                                <div class="col-lg-12">
                                                    <div class="form-group ">
                                                        <p class="text-muted font-13 m-b-15 m-t-20">Please select the group to which the user will belong.</p>
                                                        <div class="col-sm-12">
                                                            <div class="radio radio-custom radio-info radio-inline">
                                                                <input type="radio" id="inlineRadio1" value="1" name="user_group" checked>
                                                                <label for="inlineRadio1"> Pathologist </label>
                                                            </div>

                                                            <div class="radio radio-custom radio-inline">
                                                                <input type="radio" id="inlineRadio2" value="2" name="user_group">
                                                                <label for="inlineRadio2"> Cytotechnologist </label>
                                                            </div>

                                                            <div class="radio radio-custom radio-inline">
                                                                <input type="radio" id="inlineRadio3" value="3" name="user_group">
                                                                <label for="inlineRadio3"> Clerical </label>
                                                            </div>

                                                            <div class="radio radio-custom radio-inline">
                                                                <input type="radio" id="inlineRadio4" value="4" name="user_group">
                                                                <label for="inlineRadio4"> Administrator </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-12">

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Username: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input class="form-control" id="id_username" type="text" name="user_username" required="" placeholder="Enter Username">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-users"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Password: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input class="form-control" id="state-warning" type="password" required="" name="user_password" placeholder="Enter Password">
                                                            <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-lock"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Email: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="email" required name="user_email" class="form-control" id="inputEmail3" placeholder="Enter Email">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-envelope-o"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>First Name: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="text" required name="user_first_name" class="form-control" id="exampleInputEmail1" placeholder="Enter First Name">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-user"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Last Name: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="text" name="user_last_name" required class="form-control" id="exampleInputEmail1" placeholder="Enter Last Name">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-user"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Phone: (*)</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="tel" step="1" name="user_phone" class="form-control" id="exampleInputPassword1" placeholder="Enter Phone">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-phone"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Address: </b></h5>
                                                            <div class="input-group m-t-15">
                                                                 <input type="text" name="user_address" class="form-control" id="exampleInputEmail1" placeholder="Enter address">
                                                            <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-map-marker"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Address2:</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="text" name="user_address2" class="form-control" id="exampleInputEmail1" placeholder="Enter address">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-map-marker"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>City:</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="text" name="user_city" class="form-control" id="id_patient_city" placeholder="Enter your City">
                                                                <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-map-marker"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                        <div class="p-20">
                                                            <h5><b>Zip Code:</b></h5>
                                                            <div class="input-group m-t-15">
                                                                <input type="text" name="user_zipcode" class="form-control" id="exampleInputEmail1" placeholder="Enter Zip Code">
                                                            <span class="input-group-addon bg-custom b-0 text-white"><i class="fa fa-map-marker"></i></span>
                                                            </div>
                                                        </div>
                                                   </div>

                                                    <div class="col-lg-4">
                                                    <div class="p-20">
                                                        <h5><b>State:</b></h5>
                                                        <div class="input-group m-t-15">
												            <select id="id_patient_state" name="user_state" class="selectpicker show-tick" data-style="btn-white">
                                                                    {% if states %}
                                                                       {% for item in states %}
                                                                         <option value="{{ item.code }}">{{ item.name }}</option>
                                                                       {% endfor %}
                                                                    {% endif %}
                                                               </select>
                                                        </div>
											        </div>
                                                </div>

                                        </div>


                                                <div class="form-group m-b-0">
	                                                <div class="col-sm-offset-10 col-sm-10">
	                                                  <button type="submit" name="save_user" class="btn btn-default waves-effect waves-light">Save</button>
	                                                </div>
	                                            </div>

                                        <div class="form-group clearfix">
                                                     <label class="col-lg-6 control-label ">{{ message }}</label>
                                        </div>



                                        </div>
                                    </form>


                            	</div>


                            <!-- End row -->

                            </div> <!-- end col -->
                        </div>

						<!-- end row -->



                    </div> <!-- container -->

                </div> <!-- content -->


{% endblock %}