<div class="md-padding" id="popupContainer" ng-controller="profileController" ng-init="getProfileData()">
    <h1 class="no-padding">My Profile
		<a class="right">
		<i class="fa fa-refresh" aria-hidden="true" ng-click="refreshPage()"></i></a>
	</h1>
    <div class="row scroll-content">
        <div class="col-lg-1">
            <i class="fa fa-user-circle fa-5x" aria-hidden="true"></i>
        </div>
        <div class="col-lg-5 col-xs-6">
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Employee ID</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.employeeId}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Employee Name</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.employeeName}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Email ID</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.emailId}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Designation</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.designation}}
                    </p>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Role</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.role}}
                    </p>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Mobile Number</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.mobileNumber}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Alt Mobile Number</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.alternateMobileNumber}}
                    </p>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Personal EmailId</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.personalEmailId}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Shift</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.shift}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Primary Skill</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.baseTechnology}}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xs-6">
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Technologies Known</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.technologyKnown}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Work Location</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.empLocation}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Functional Org</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.functionalGroup}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Domain</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.domain}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Employment Type</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.employmentType}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Employment Status</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.empStatus}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Date of Joining</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.dateOfJoining | date:'dd-MMM-yyyy'}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Passport Expiry Date</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.passportExpiryDate | date:'dd-MMM-yyyy'}}
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-xs-6">
                    <p>
                        <b>Date of Birth</b> <b class="right">:</b> 
                    </p>
                </div>
                <div class="col-lg-7 col-xs-6">
                    <p>
                        {{profile.dateOfBirth | date:'dd-MMM-yyyy'}}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12 text-center">
        <md-button class="md-raised md-primary" ng-click="updateProfile()"> <i class="fa fa-pencil-square-o fa-1x"></i> Update Profile
        </md-button>
    </div>
    <div class="col-lg-2 col-xs-12"></div>
</div>
</div>