@model PatientModel







<style>
    .form-control:focus {
        box-shadow: none;
        border-color: #BA68C8
    }

    .profile-button {
        background: rgb(99, 39, 120);
        box-shadow: none;
        border: none
    }

        .profile-button:hover {
            background: #682773
        }

        .profile-button:focus {
            background: #682773;
            box-shadow: none
        }

        .profile-button:active {
            background: #682773;
            box-shadow: none
        }

    .back:hover {
        color: #682773;
        cursor: pointer
    }

    .labels {
        font-size: 11px
    }

    .add-experience:hover {
        background: #BA68C8;
        color: #fff;
        cursor: pointer;
        border: solid 1px #BA68C8
    }
</style>

<section class="page-section">
    <div class="container rounded bg-white mt-5 mb-5">
        <div class="row">
            <div class="col-md-3 border-right">
                <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                <img class="rounded-circle mt-5" width="150px" src="/img/@Model.User.Avatar"><span class="font-weight-bold">@Model.User.FirstName</span><span class="text-black-50">@Model.User.Email</span><span> </span></div>
            </div>
            <div class="col-md-5 border-right">
                <div class="p-3 py-5">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="text-right">Profile Settings</h4>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                        <label class="labels">@Model.User.FirstName</label>
                        </div>
                        <div class="col-md-6">
                        <label class="labels"> @Model.User.LastName</label>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <label class="labels">@Model.BIO</label>
                        </div>

                        <div class="col-md-12">
                            <label class="labels">@Model.User.UserName</label>
                        </div>
                        <div class="col-md-12">
                            <label class="labels">Created at @Model.User.CreationTime</label>
                        </div>
                        <div class="col-md-12">
                            <label class="labels">has a @Model.MedicalStates.Count() medical cases</label>

                        </div>
                    </div>
                       <div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Go Home</button></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 py-5">
                    <div class="d-flex justify-content-between align-items-center experience">
                        <span>
                        </span>
                    </div><br>
                    
                </div>
            </div>
        </div>
    </div>
</section>