{% extends 'base.html' %}
{% block content %}
{% load staticfiles %}
<div class="content">
    <div class="">
        <div class="page-header-title">
            <!--<h4 class="page-title">Profile</h4>-->
        </div>
    </div>
    <div class="page-content-wrapper ">
      <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <h4 class="m-t-0 m-b-0">Edit Profile</h4>
                        {% if form.errors.items %}
                        {% for field in form %}
                        {% for error in field.errors %}
                        <div class="alert alert-danger alert-dismissible fade in"> 
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>{{ error|escape }}</div>
                            {% endfor %}
                            {% endfor %}
                            {% for error in form.non_field_errors %}
                            <div class="alert alert-danger alert-dismissible fade in"> 
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>{{ error|escape }}</div>
                                {% endfor %}
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="profile_pic">
                                            <img class="image_preview" width="130" height="130" src="{{request.user.avator}}" onError="this.onerror=null;this.src='https://s3.amazonaws.com/dls2018/profile/fbe2b45d-89b9-4ae2-b5d6-798c276328ab.jpg';">
                                        </div>
                                        <div class="upload_pic">
                                            <input type="file" name="avator" id="avator" class="profile_image">
                                            <div class="buttns_upload btn-primary">Choose Profile</div>
                                        </div>
                                    </div>
                                    <div class="col-sm-9 col-xs-12">
                                        <div class="user_pro_box">
                                            <h4>{{request.user.get_full_name}}</h4>
                                            <p>{{request.user.userrole.title}}</p>
                                        </div>
                                        <div class="m-t-20">
                                            <form class="" name="frmProfileEdit" method="POST" action="" novalidate="">
                                                {% csrf_token %}
                                                <div class="form-group">
                                                    <label>First Name</label> <span class="star">*</span>
                                                    <div>
                                                        <input type="text" id="first_name" name="first_name" class="form-control" required data-parsley-required-message="Please enter First Name" required placeholder="Enter last name" value="{{request.user.first_name}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label>Last Name</label> <span class="star">*</span>
                                                    <div>
                                                        <input type="text" id="last_name" name="last_name" class="form-control" data-parsley-required-message="Please enter Last Name" required placeholder="Enter last name" value="{{request.user.last_name}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label>Mobile Number</label> <span class="star">*</span>
                                                    <div>
                                                        <input data-parsley-type="number" id="mobile_no" name="mobile_no" type="text" class="form-control " data-parsley-required-message="Please enter Mobile Number" required placeholder="Enter only numbers" value="{{request.user.mobile_no}}">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div>
                                                        <button type="submit" class="btn btn-primary waves-effect waves-light"> Submit </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>

    {% endblock %}