<!DOCTYPE html5>
<html>
<head>
    {% import "header.html" as header %}
    <title>{{user.display_name}}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/etiquette.css">
    {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
    <script src="/static/js/common.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/editor.js"></script>
    <script src="/static/js/spinner.js"></script>

<style>
h2, h3
{
    margin-top: 0;
}

#content_body
{
    grid-row-gap: 8px;
    grid-auto-rows: max-content;
}
</style>
</head>

<body>
    {{header.make_header(session=session)}}
    <div id="content_body">
        <div class="panel">
            <h2 id="display_name">{{user.display_name}}</h2>
            <p>ID: <a href="/userid/{{user.id}}">{{user.id}}</a></p>
            <p>User since <span title="{{user.created|int|timestamp_to_8601}}">{{user.created|timestamp_to_naturaldate}}.</span></p>
        </div>
        <div class="panel">
            <h3><a href="/search?author={{user.username}}">Photos by {{user.display_name}}</a></h3>
            <iframe
            class="embedded_search"
            src="/search_embed?author={{user.username}}&orderby=created-desc&yield_albums=no&limit=10"
            onload="return common.size_iframe_to_content(this);"
            >
            </iframe>
        </div>
    </div>
</body>

<script type="text/javascript">
{% if user.id == session.user.id %}
const USERNAME = "{{user.username}}";

profile_ed_on_open = undefined;

function profile_ed_on_save(ed)
{
    function callback(response)
    {
        ed.hide_spinner();

        if (! response.meta.json_ok)
        {
            alert(JSON.stringify(response));
            return;
        }
        if ("error_type" in response.data)
        {
            ed.show_error(response.data.error_message);
            return;
        }

        // The data that comes back from the server will have been normalized.
        const new_display_name = response.data.display_name;
        document.title = new_display_name;

        ed.elements["display_name"].edit.value = new_display_name;

        ed.save();
    }

    ed.show_spinner();
    api.users.edit(USERNAME, ed.elements["display_name"].edit.value, callback);
}

profile_ed_on_cancel = undefined;

const profile_ed_elements = [
    {
        "id": "display_name",
        "element": document.getElementById("display_name"),
        "placeholder": "Display name",
        "empty_text": USERNAME,
        "autofocus": true,
    },
];

const profile_ed = new editor.Editor(
    profile_ed_elements,
    profile_ed_on_open,
    profile_ed_on_save,
    profile_ed_on_cancel,
);
{% endif %}
</script>
</html>