{% extends 'layouts/base.html' %}
{% load static %}
{% block content %}
<!-- [ Main Content ] start -->
<!-- profile header start -->
<div class="user-profile user-card mb-4">
    <div class="card-header border-0 p-0 pb-0">
        <div class="cover-img-block">
            <img src="{% static 'assets/images/user/cover.jpg' %}" alt="" class="img-fluid">
            <div class="overlay"></div>
            <div class="change-cover">
                <div class="dropdown">
                    <a class="drp-icon dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false"><i class="icon feather icon-camera"></i></a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"><i class="feather icon-upload-cloud me-2"></i>upload
                            new</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-image me-2"></i>from photos</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-film me-2"></i> upload
                            video</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-trash-2 me-2"></i>remove</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body pt-0">
        <div class="user-about-block m-0">
            <div class="row">
                <div class="col-md-4 text-center mt-n5">
                    <div class="change-profile text-center">
                        <div class="dropdown w-auto d-inline-block">
                            <a class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <div class="profile-dp">
                                    <div class="position-relative d-inline-block">
                                        <img class="img-radius img-fluid wid-100"
                                            src="{% static 'assets/images/user/avatar-5.jpg' %}" alt="User image">
                                    </div>
                                    <div class="overlay">
                                        <span>change</span>
                                    </div>
                                </div>
                                <div class="certificated-badge">
                                    <i class="fas fa-certificate text-c-blue bg-icon"></i>
                                    <i class="fas fa-check front-icon text-white"></i>
                                </div>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#"><i
                                        class="feather icon-upload-cloud me-2"></i>upload new</a>
                                <a class="dropdown-item" href="#"><i class="feather icon-image me-2"></i>from
                                    photos</a>
                                <a class="dropdown-item" href="#"><i
                                        class="feather icon-shield me-2"></i>Protact</a>
                                <a class="dropdown-item" href="#"><i
                                        class="feather icon-trash-2 me-2"></i>remove</a>
                            </div>
                        </div>
                    </div>
                    <h5 class="mb-1">Lary Doe</h5>
                    <p class="mb-2 text-muted">UI/UX Designer</p>
                </div>
                <div class="col-md-8 mt-md-4">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="#" class="mb-1 text-muted d-flex align-items-end text-h-primary"><i
                                    class="feather icon-globe me-2 f-18"></i>www.Codedthemes.net</a>
                            <div class="clearfix"></div>
                            <a href="mailto:demo@domain.com"
                                class="mb-1 text-muted d-flex align-items-end text-h-primary"><i
                                    class="feather icon-mail me-2 f-18"></i>demo@domain.com</a>
                            <div class="clearfix"></div>
                            <a href="#" class="mb-1 text-muted d-flex align-items-end text-h-primary"><i
                                    class="feather icon-phone me-2 f-18"></i>+1 9999-999-999</a>
                        </div>
                        <div class="col-md-6">
                            <div class="media">
                                <i class="feather icon-map-pin me-2 mt-1 f-18"></i>
                                <div class="media-body text-start">
                                    <p class="mb-0 text-muted">4289 Calvin Street</p>
                                    <p class="mb-0 text-muted">Baltimore, near MD Tower Maryland,</p>
                                    <p class="mb-0 text-muted">Maryland (21201)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- profile header end -->
<!-- profile body start -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Personal details</h5>
                <button type="button" class="btn btn-primary btn-sm rounded m-0 float-end"
                    data-bs-toggle="collapse" data-bs-target=".pro-det-edit" aria-expanded="false"
                    aria-controls="pro-det-edit-1 pro-det-edit-2">
                    <i class="feather icon-edit"></i>
                </button>
            </div>
            <div class="card-body border-top pro-det-edit collapse show" id="pro-det-edit-1">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Full Name</label>
                        <div class="col-sm-9">
                            Lary Doe
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Gender</label>
                        <div class="col-sm-9">
                            Male
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Birth Date</label>
                        <div class="col-sm-9">
                            16-12-1994
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Martail Status</label>
                        <div class="col-sm-9">
                            Unmarried
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Location</label>
                        <div class="col-sm-9">
                            <p class="mb-0 text-muted">4289 Calvin Street</p>
                            <p class="mb-0 text-muted">Baltimore, near MD Tower Maryland,</p>
                            <p class="mb-0 text-muted">Maryland (21201)</p>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body border-top pro-det-edit collapse " id="pro-det-edit-2">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Full Name</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Full Name" value="Lary Doe">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Gender</label>
                        <div class="col-sm-9">
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="customRadioInline1" name="customRadioInline1"
                                    class="custom-control-input" checked>
                                <label class="custom-control-label" for="customRadioInline1">Male</label>
                            </div>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="customRadioInline2" name="customRadioInline1"
                                    class="custom-control-input">
                                <label class="custom-control-label" for="customRadioInline2">Female</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Birth Date</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" value="1994-12-16">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Martail Status</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="exampleFormControlSelect1">
                                <option>Select Marital Status</option>
                                <option>Married</option>
                                <option selected>Unmarried</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Location</label>
                        <div class="col-sm-9">
                            <textarea
                                class="form-control">4289 Calvin Street,  Baltimore, near MD Tower Maryland, Maryland (21201)</textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Contact Information</h5>
                <button type="button" class="btn btn-primary btn-sm rounded m-0 float-end"
                    data-bs-toggle="collapse" data-bs-target=".pro-dont-edit" aria-expanded="false"
                    aria-controls="pro-dont-edit-1 pro-dont-edit-2">
                    <i class="feather icon-edit"></i>
                </button>
            </div>
            <div class="card-body border-top pro-dont-edit collapse show" id="pro-dont-edit-1">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Mobile Number</label>
                        <div class="col-sm-9">
                            +1 9999-999-999
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Email Address</label>
                        <div class="col-sm-9">
                            Demo@domain.com
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Twitter</label>
                        <div class="col-sm-9">
                            @phonixcoded
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Skype</label>
                        <div class="col-sm-9">
                            @phonixcoded demo
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body border-top pro-dont-edit collapse " id="pro-dont-edit-2">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Mobile Number</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Full Name"
                                value="+1 9999-999-999">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Email Address</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Ema" value="Demo@domain.com">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Twitter</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Full Name"
                                value="@phonixcoded">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Skype</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Full Name"
                                value="@phonixcoded demo">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body d-flex align-items-center justify-content-between">
                <h5 class="mb-0">other Information</h5>
                <button type="button" class="btn btn-primary btn-sm rounded m-0 float-end"
                    data-bs-toggle="collapse" data-bs-target=".pro-wrk-edit" aria-expanded="false"
                    aria-controls="pro-wrk-edit-1 pro-wrk-edit-2">
                    <i class="feather icon-edit"></i>
                </button>
            </div>
            <div class="card-body border-top pro-wrk-edit collapse show" id="pro-wrk-edit-1">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Occupation</label>
                        <div class="col-sm-9">
                            Designer
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Skills</label>
                        <div class="col-sm-9">
                            C#, Javascript, Scss
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Jobs</label>
                        <div class="col-sm-9">
                            Codedthemes
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body border-top pro-wrk-edit collapse " id="pro-wrk-edit-2">
                <form>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Occupation</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Full Name" value="Designer">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Email Address</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Ema" value="Demo@domain.com">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label font-weight-bolder">Jobs</label>
                        <div class="col-sm-9">
                            <div class="custom-control custom-checkbox form-check d-inline-block me-2">
                                <input type="checkbox" class="custom-control-input" id="pro-wrk-chk-1" checked>
                                <label class="custom-control-label" for="pro-wrk-chk-1">C#</label>
                            </div>
                            <div class="custom-control custom-checkbox form-check d-inline-block me-2">
                                <input type="checkbox" class="custom-control-input" id="pro-wrk-chk-2" checked>
                                <label class="custom-control-label" for="pro-wrk-chk-2">Javascript</label>
                            </div>
                            <div class="custom-control custom-checkbox form-check d-inline-block me-2">
                                <input type="checkbox" class="custom-control-input" id="pro-wrk-chk-3" checked>
                                <label class="custom-control-label" for="pro-wrk-chk-3">Scss</label>
                            </div>
                            <div class="custom-control custom-checkbox form-check d-inline-block me-2">
                                <input type="checkbox" class="custom-control-input" id="pro-wrk-chk-4">
                                <label class="custom-control-label" for="pro-wrk-chk-4">Html</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
        <!-- profile body end -->
<!-- [ Main Content ] end -->
{% endblock content %}

