@(profile: User, keys: List[UserApiKey], ownProfile: Boolean)(implicit user: Option[models.User] = None)
@main("Profile") {
    <script src="@routes.Application.javascriptRoutes" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/recommendation.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/errorRedirect.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" type="text/javascript"></script>

    <div class="row">
        <div class="col-md-3 col-lg-3 col-sm-5">
            <img src=@profile.getAvatarUrl(256) class="profilePicture">
            <div align="center">
                <h4>Followed by <span id="followerSize">@profile.followers.size</span> people</h4>
                @user match {
                    case Some(viewer) => {
                        @if(ownProfile) {
                            <h4><a href="@routes.Profile.editProfile">Edit Profile</a></h4>
                        } else {
                            <h4>
                                <button id="userFollowButton" type="button" class="followButton btn btn-link" data-toggle="button"
                                aria-pressed="
                                    @if(profile.followers.contains(viewer.id)) {
                                        true
                                    }else {
                                        false
                                    }"
                                autocomplete="off" objectId="@profile.id.stringify" objectName="@profile.fullName" objectType="user">
                                @if(profile.followers.contains(viewer.id)) {
                                    <span class="glyphicon glyphicon-star-empty"></span> Unfollow
                                } else {
                                    <span class="glyphicon glyphicon-star"></span> Follow
                                }
                                </button>
                            </h4>
                            <div id="recommendPanel" class="panel panel-default" style="display:none;">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-parent="#accordion" href="#collapseThree" aria-expanded="true" style="float:left;">
                                            Also follow these?
                                        </a>
                                        <a style="float:right;" href="javascript:$('#recommendPanel').slideToggle('slow');">x</a>
                                        <div style="clear:both;"></div>
                                    </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse in" aria-expanded="true">
                                    <div id="recommendDiv" class="panel-body"></div>
                                </div>
                            </div>
                                <!-- Is it the only way to store a scala variable as a global for re-use in Javascript? -->
                            <script>
                                    var viewerId = '@viewer.id';
                            </script>
                        }
                    }
                    case None => {}
                }
            </div>
        </div>
        <div class="col-md-9 col-lg-9 col-sm-7">
            @if(profile.identityId.providerId != "userpass") {
                <div>
                    <h1>@profile.fullName</h1>
                </div>
            } else {
                @if(ownProfile){
                    <div id="prf-first-name" class="text-left inline">
                        <h1 id="first-name-title" class="inline" style="cursor:pointer" title="Click to edit user's first name.">@Html(profile.firstName)</h1>
                        <div id="h-edit-first" class="hiddencomplete" title="Click to edit user's first name.">
                            <a href="javascript:updateFirstLastName()"></a>
                        </div>
                    </div>
                    <div id="prf-last-name" class="text-left inline edit-tab">
                        <h1 id="last-name-title" class="inline" style="cursor:pointer" title="Click to edit user's last name.">@Html(profile.lastName)</h1>
                        <div id="h-edit-last" class="hiddencomplete" title="Click to edit user's last name.">
                            <a href="javascript:updateFirstLastName()"><span class ="glyphicon glyphicon-edit"></span></a>
                        </div>
                    </div>
                } else {
                    <div class="text-left inline">
                        <h1 class="inline">@Html(profile.firstName)</h1>
                    </div>
                    <div class="text-left inline edit-tab">
                        <h1 class="inline">@Html(profile.lastName)</h1>
                    </div>
                }
            }
            <div class="profile-section">
            @profile.identityId.providerId match {
                case "userpass" => {
                    Profile Source : Local Account
                }
                case "google" => {
                    Profile Source : <img height="16px" src="@routes.Assets.at("securesocial/images/providers/" + profile.identityId.providerId + ".png")" alt="@profile.identityId.providerId" />
                    <a href="https://plus.google.com/@profile.identityId.userId">Google+</a>
                }
                case "twitter" => {
                    Profile Source : <img height="16px" src="@routes.Assets.at("securesocial/images/providers/" + profile.identityId.providerId + ".png")" alt="@profile.identityId.providerId" />
                    <a href="https://twitter.com/intent/user?user_id=@profile.identityId.userId">Twitter</a>
                }
                case "facebook" => {
                    Profile Source : <img height="16px" src="@routes.Assets.at("securesocial/images/providers/" + profile.identityId.providerId + ".png")" alt="@profile.identityId.providerId" />
                    <a href="https://www.facebook.com/app_scoped_user_id/@profile.identityId.userId">Facebook</a>
                }
                case "orcid" => {
                    Profile Source : <img height="16px" src="@routes.Assets.at("securesocial/images/providers/" + profile.identityId.providerId + ".png")" alt="@profile.identityId.providerId" />
                    <a href="https://orcid.org/@profile.identityId.userId">ORCID</a>
                }
                case provider => {
                    Profile Source : <img height="16px" src="@routes.Assets.at("securesocial/images/providers/" + profile.identityId.providerId + ".png")" alt="@profile.identityId.providerId" />
                    @provider.capitalize
                }
            }
            </div>
            @if(profile.email.isDefined) {
                <div>@profile.email.get</div>
            }
            <div>&nbsp;</div>
            @if(profile.profile.isDefined) {
                <div class="profile-section">
                    <h4>Institution</h4>
                    <p>@profile.profile.get.getPositionAtInstitution</p>

                    @profile.profile.get.orcidID match{
                        case Some(info) => {
                            <h4>Orcid ID</h4>
                            <a href="http://orcid.org/@info" target="_blank"> <p>@info</p> </a>
                        }
                        case None => {}
                    }
                    @if(profile.profile.get.biography.nonEmpty) {
                        <h4>Biography</h4>
                        <p>@profile.profile.get.biography</p>
                    }
                    @if(profile.profile.get.currentprojects.nonEmpty) {
                        <h4>Current Projects</h4>
                        <p>@profile.profile.get.currentprojects.mkString(", ")</p>
                    }
                    @if(profile.profile.get.pastprojects.nonEmpty) {
                        <h4>Past Projects</h4>
                        <p>@profile.profile.get.pastprojects.mkString(", ")</p>
                    }
                </div>
            }
            @if(ownProfile && play.api.Play.current.plugin[services.StagingAreaPlugin].isDefined) {
                <div class="profile-disclaimer small">@play.api.i18n.Messages("profile.disclaimer")</div>
            }
            @if(ownProfile) {
                <h4 id="userkeys">User API Keys</h4>
                <span>Create your personal API keys by providing a name for the key and clicking the Add button. Key names have to be unique per user.</span>
                <div class="row wrapped" id="key-">
                    <div class="col-md-1"></div>
                    <div class="col-md-2">Name</div>
                    <div class="col-md-9">Key</div>
                </div>
                @keys.map{key =>
                    <div class="row wrapped" id="key-@key.name">
                        <div class="col-md-1">
                            @if(key.name.startsWith("_")) {
                                <span class="glyphicon glyphicon-trash"
                                  title="System API keys start with and underscore and connot be deleted from the user interface"></span>
                            } else {
                                <a href='javascript:deleteUserKey("@key.name");' title="Delete this user API key">
                                    <span class="glyphicon glyphicon-trash"></span></a>
                            }
                        </div>
                        <div class="col-md-2">@key.name</div>
                        <div class="col-md-9">@key.key</div>
                    </div>
                }
                <div class="row wrapped">
                    <div class="col-md-1"><a href='javascript:addUserKey();'><span class="glyphicon glyphicon-plus"></span> Add</a></div>
                    <div class="col-md-2"><input type="text" id="userkeyname" class="form-control"></div>
                </div>
            }
        </div>

    </div>

    <script language="javascript">
            var profileMail = "@profile.email.getOrElse("")";
            var firstName = $('#first-name-title').text();
            var lastName = $('#last-name-title').text();

            $('#first-name-title').click(function(){
                updateFirstLastName();
            });
            $('#last-name-title').click(function(){
                updateFirstLastName();
            });
            function updateFirstLastName() {
                cancelFirstLastName();
                firstName = $('#first-name-title').text();
                lastName = $('#last-name-title').text();
                $('<div class="inline first_name_div h3"> </div>').insertAfter($('#prf-first-name'));
                $('.first_name_div').append('<input type="text" id="first_name_input" style="width:300px"" />');
                $('.first_name_div').append('<div class="small hiddencomplete" id="first-name-error"> <span class="error">First name is required.</span></div>');

                $('<div class="inline last_name_div h3"></div>').insertAfter($('#prf-last-name'));
                $('.last_name_div').append('<input type="text" id="last_name_input" style="width:300px"" />');
                $('.last_name_div').append('<button class="btn btn-sm btn-primary edit-tab" onclick="saveFirstLastName()"> <span class="glyphicon glyphicon-send"></span> Save</button>');
                $('.last_name_div').append('<button class="btn btn-sm btn-link" onclick="cancelFirstLastName()"> <span class="glyphicon glyphicon-remove"></span> Cancel</button>');
                $('.last_name_div').append('<div class="small hiddencomplete" id="last-name-error"> <span class="error">Last name is required.</span></div>');

                $('#first_name_input').val(firstName);
                $('#first-name-title').text("");
                $('#h-edit-first').css("display", "none");

                $('#last_name_input').val(lastName);
                $('#last-name-title').text("");
                $('#h-edit-last').css("display", "none");
            }

            function saveFirstLastName() {
                if($('#first_name_input').val().length < 1) {
                    $('#first-name-error').show();
                    return false;
                } else {
                    $('#first-name-error').hide();
                }
                if($('#last_name_input').val().length < 1) {
                    $('#last-name-error').show();
                    return false;
                } else {
                    $('#last-name-error').hide();
                }
                var fName = htmlEncode($('#first_name_input').val());
                var lName = htmlEncode($('#last_name_input').val());
                var request = jsRoutes.api.Users.updateName("@profile.id", fName, lName ).ajax({
                    type: 'POST'
                });
                request.done(function(response, textStatus, jqXHR) {
                    //console.log("Success");
                    $('.first_name_div').remove();
                    $('#first-name-title').html(fName);
                    $('#first-name-div').mouseleave();
                    $('#h-edit-first').css("display", "");
                    firstName = $('#first-name-title').text();

                    $('.last_name_div').remove();
                    $('#last-name-title').html(lName);
                    $('#last-name-div').mouseleave();
                    $('#h-edit-last').css("display", "");
                    lastName = $('#last-name-title').text();
                });
                request.fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("The following error occurred: " + textStatus, errorThrown);
                    var errMsg = "Yoy must be logged in to update the name.";
                    if(!checkErrorAndRedirect(jqXHR, errMsg)) {
                        notify("The name was not updated due to: "+ errorThrown, "error");
                    }
                });
            }

            function cancelFirstLastName() {
                $('#first-name-title').html(firstName);
                $('.first_name_div').remove();
                $('#prf-first-name').css("display", "inline");
                $('#h-edit-first').css("display", "");
                $('#prf-first-name').mouseleave();

                $('#last-name-title').html(lastName);
                $('.last_name_div').remove();
                $('#last-name-title').css("display", "inline");
                $('#h-edit-last').css("display", "");
                $('#prf-last-name').mouseleave();
            }

            $(document).ready(function(){
                $(document).on('mouseenter', '#prf-first-name', function() {
                    $('#h-edit-first').removeClass("hiddencomplete");
                    $('#h-edit-first').addClass("inline");
                }).on('mouseleave', '#prf-first-name', function() {
                    $('#h-edit-first').removeClass("inline");
                    $('#h-edit-first').addClass("hiddencomplete");
                });

                $(document).on('mouseenter', '#prf-last-name', function() {
                    $('#h-edit-last').removeClass("hiddencomplete");
                    $('#h-edit-last').addClass("inline");
                }).on('mouseleave', '#prf-last-name', function() {
                    $('#h-edit-last').removeClass("inline");
                    $('#h-edit-last').addClass("hiddencomplete");
                });

                function followCallback(data) {
                    var $followerSize = $('#followerSize');
                    var followerSize = parseInt($followerSize.text());
                    $followerSize.text(followerSize + 1);

                    var newRowHtml = '<tr><td>viewerId</td></tr>';
                    $('#followersTable tr:last').after(newRowHtml);
                    recommendationHandler(jsRoutes, $('#recommendPanel'), $('#recommendDiv'),
                            data['recommendations']);
                }

                function unfollowCallback() {
                    var $followerSize = $('#followerSize');
                    var followerSize = parseInt($followerSize.text());
                    $followerSize.text(followerSize - 1);

                    $('#followersTable').find('td').filter(function () {
                        return $(this).text().trim() == viewerId;
                    }).first().remove();
                }

                $(document).on('click', '.followButton', function() {
                    var id = $(this).attr('objectId');
                    var name = $(this).attr('objectName');
                    var type = $(this).attr('objectType');
                    if ($(this).attr('id') == undefined || $(this).attr('id') === '') {
                        followHandler.call(this, jsRoutes, id, name, type, undefined, undefined);
                    } else {
                        followHandler.call(this, jsRoutes, id, name, type, followCallback, unfollowCallback);
                    }
                });
            });

            function addUserKey() {
                var userkeyname = $("#userkeyname").val();
                if (userkeyname == "") {
                    return;
                }
                $("#userkeyname").val("");
                var request = jsRoutes.api.Users.keysAdd(userkeyname).ajax({
                    type: 'POST'
                });
                request.done(function(response, textStatus, jqXHR) {
                    var newkey = '<div class="row wrapped" id="key-' + userkeyname + '">';
                    newkey += '<div class="col-md-1"><a href="javascript:deleteUserKey(\'' + userkeyname + '\');"><span class="glyphicon glyphicon-trash"></span></a></div>';
                    newkey += '<div class="col-md-2">' + userkeyname + '</div>';
                    newkey += '<div class="col-md-9">' + response.key + '</div>';
                    newkey += '</div>';
                    // $("#userkeys").after(newkey);
                    $(newkey).insertAfter($('[id^="key-"]').last());
                });
                request.fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("The following error occurred: " + textStatus, errorThrown);
                    var errMsg = "Yoy must be logged in to add the key.";
                    if(!checkErrorAndRedirect(jqXHR, errMsg)) {
                        notify("The name was not updated due to: "+ errorThrown, "error");
                    }
                });
            }

            function deleteUserKey(name) {
                var request = jsRoutes.api.Users.keysDelete(name).ajax({
                    type: 'DELETE'
                });
                request.done(function(response, textStatus, jqXHR) {
                    $("#key-" + name).remove();
                    notify("Removed key '" + name + "'", "success", false, 2000 );
                });
                request.fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("The following error occurred: " + textStatus, errorThrown);
                    var errMsg = "Yoy must be logged in to delete the key.";
                    if(!checkErrorAndRedirect(jqXHR, errMsg)) {
                        notify("The name was not updated due to: "+ errorThrown, "error");
                    }
                });
            }
    </script>
}