{% macro show_user_profile(user_id) -%}

<script type="text/javascript">
    function load_user_profile(extra_options) {
        $.ajax({
            url: makeURI("/api/1.0/users/{{ user_id }}", extra_options),
            dataType: "json",
            success: function (data) {
                var user = data["user"];
                extendWithGravatar(user, 64);
                $("#user_profile_template").tmpl(data["user"]).appendTo("#user_profile_container");
            }
        });
    }

    $(document).ready(function () {
        var uri_options = {};
        load_user_profile(uri_options);
    });
</script>

<script id="user_profile_template" type="text/x-jquery-tmpl">
    {% raw %}
    <div>
        <div style="float: left;"><img src="${gravatar}"></div>
        <div style="margin-left: 90px;">
            <h2>${user_name}</h2>
            <div>Company: {%html company_link %}
                    [<span style="font-style: italic;"><a
                        href="https://wiki.openstack.org/wiki/Stackalytics#Company_affiliation" style="color: grey" target="_blank">how to change</a></span>]
            </div>
            {%if launchpad_id %}
                <div>Launchpad: <a href="https://launchpad.net/~${launchpad_id}" target="_blank">${launchpad_id}</a></div>
            {%/if%}
            {%if gerrit_id %}
                <div>Gerrit: <a href="https://review.openstack.org/#/q/owner:${gerrit_id},n,z" target="_blank">${gerrit_id}</a></div>
            {%/if%}
            {%if github_id %}
                <div>Github: <a href="https://github.com/${github_id}" target="_blank">${github_id}</a></div>
            {%/if%}
            {%if ldap_id %}
                <div>LDAP: ${ldap_id}</div>
            {%/if%}
            {%if core %}
                <div>Core in:
                    {%each( index, value ) core %}
                        <a href="/?module=${value[0]}&metric=${metric}">${value[0]}</a>
                        {%if value[1] != 'master' %}
                            (<small>${value[1]}</small>)
                        {%/if%}
                    {%/each%}
                </div>
            {%/if%}
        </div>
    </div>
    {% endraw %}
</script>

<div id="user_profile_container" style="margin-bottom: 2em;"></div>

{%- endmacro %}
