<div class="col-md-3" id="profile-div">
    <div id="profile-header-paragraph-div" class="list-group-item row">
        <p class="boldtext nomarginbottom">${user.userName}</p>
    </div>
    <div id="profile-content-div" class="list-group-item row">
        <div id="profile-container-div" class="container row profile-container">
            <div class="col-sm-4" id="profile-img-div">
                <img id="profile-img" class="img-responsive" src="/Vivid/ImageServlet?name=${user.userName}">
            </div>
            <div class="col-sm-8 bio-container">
                <p id="bio-title">Bio:<i id="edit" class="glyphicon glyphicon-cog pull-right"></i></p>
                <p id="bio-text">${nonCachedUserBio}</p>
                <textarea id="txtarea" rows="10" cols="40"></textarea>
                <button id="saveBtn" class="btn btn-primary">Save</button>
            </div>
            <div class="row">
                <div class="col-sm-4 profileinfo-container">
                    <p class="user-info" id="dob-paragraph">Born:</p>
                    <p>${user.dateOfBirth}</p>
                    <p class="user-info" id="gender-paragraph">Gender:</p>
                    <p>${user.gender}</p>
                    <p class="user-info" id="signup-date-paragraph">Member since:</p>
                    <p>${user.signupDate}</p>
                    <p class="user-info" id="country-paragraph">Country:</p>
                    <p>${user.country}</p>
                </div>
            </div>
        </div>
    </div>
</div>