<tabset justified="true">
    <tab heading="Basic Details">
        <h1 class="lobster">Edit Profile</h1>
        <div id="basicStatus"></div>
        <form name="basicForm" id="basicForm" ng-submit="basic()">
            <div class="form-group">
                <label>Status</label>
                <input type="text" class="form-control" ng-model="profile.profile_status" maxlength="80">
            </div>
            <div class="form-group">
                <label>Location</label>
                <input type="text" class="form-control" ng-model="profile.location">
            </div>
            <div class="form-group">
                <label>Age</label>
                <input type="number" class="form-control" ng-model="profile.age">
            </div>
            <div class="form-group">
                <label>Gender</label>
                <select class="form-control" ng-model="profile.gender">
                    <option value="1">Male</option>
                    <option value="2">Female</option>
                    <option value="3">Hide</option>
                </select>
            </div>
            <div class="form-group">
                <label>About</label>
                <textarea class="form-control" ng-model="profile.about"></textarea>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-sky btn-block"><i class="fa fa-cogs"></i> Update</button>
            </div>
        </form>
    </tab>
    <tab heading="Profile & Header Image">
        <h1 class="lobster">Edit Images</h1>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Profile Image</label>
                    <img class="img-responsive center-block" ng-src="uploads/{{profile.profile_img}}"><br>
                    <div class="btn btn-block btn-sky" ngf-select ngf-change="uploadProfileImg($files)">
                        <i class="fa fa-image"></i> Update Profile Image
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Header Image</label>
                    <img class="img-responsive center-block" ng-src="uploads/{{profile.header_img}}"><br>
                    <div class="btn btn-block btn-sky" ngf-select ngf-change="uploadHeaderImg($files)">
                        <i class="fa fa-image"></i> Update Profile Image
                    </div>
                </div>
            </div>
        </div>
    </tab>
    <tab heading="Change Password">
        <h1 class="lobster">Change Password</h1>
        <div id="changePassStatus"></div>
        <form name="changePassForm" id="changePassForm" ng-submit="changePass()" novalidate>
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" placeholder="Enter Password" ng-model="pass.pass1">
            </div>
            <div class="form-group">
                <label>Retype Password</label>
                <input type="password" class="form-control" placeholder="Enter Password" ng-model="pass.pass2">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-sky"><i class="fa fa-save"></i> Update Password</button>
            </div>
        </form>
    </tab>
</tabset>

