<!DOCTYPE html5>
<html>
<head>
    {% import "header.html" as header %}
    <title>Bookmarks</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/static/common.css">
    <script src="/static/common.js"></script>

<style>
#bookmarks
{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}
.bookmark_card,
.new_bookmark_card
{
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: baseline;

    padding: 8px;
    margin: 8px;
    width: 500px;
    max-width: 500px;

    border-radius: 8px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);

    background-color: #ffffd4;
}
.bookmark_card .bookmark_url
{
    color: #aaa;
}
</style>
</head>


<body>
    {{header.make_header(session=session)}}
    <div id="content_body">
        <div id="bookmarks">
            {% for bookmark in bookmarks %}
            <div class="bookmark_card" data-bookmark-id="{{bookmark.id}}">
                <a href="{{bookmark.url}}"
                class="bookmark_title"
                data-editor-id="title"
                data-editor-placeholder="title (optional)"
                data-editor-empty-text="{{bookmark.id}}">
                {%- if bookmark.title -%}
                    {{bookmark.title}}
                {%- else -%}
                    {{bookmark.id}}
                {%- endif -%}
                </a>

                <a href="{{bookmark.url}}"
                class="bookmark_url"
                data-editor-id="url"
                data-editor-placeholder="url">
                {{-bookmark.url-}}
                </a>
            </div>
            {% endfor %}
            <div class="new_bookmark_card">
                <input id="new_bookmark_title" type="text" placeholder="title (optional)">
                <input id="new_bookmark_url" type="text" placeholder="url">
                <button id="new_bookmark_button" class="green_button" onclick="submit_bookmark_form()">Create</button>
            </div>
        </div>
    </div>
</body>


<script type="text/javascript">
function submit_bookmark_form()
{
    var url = document.getElementById("new_bookmark_url").value.trim();
    var title = document.getElementById("new_bookmark_title").value.trim();
    if (!url)
    {
        return;
    }
    return create_bookmark(url, title);
}

function create_bookmark(url, title)
{
    var api_url = "/bookmarks/create_bookmark";
    var data = new FormData();
    data.append("url", url);
    if (title)
    {
        data.append("title", title);
    }
    var callback = function(){location.reload();};
    post(api_url, data, callback);
}


function on_open(editor, edit_element_map)
{
    editor.open();
    edit_element_map["title"].focus();
}

function on_save(editor, edit_element_map)
{
    var title_editor = edit_element_map["title"];
    var url_editor = edit_element_map["url"];
    url_editor.value = url_editor.value.trim();
    if (!url_editor.value)
    {
        return;
    }

    editor.show_spinner();
    function callback()
    {
        editor.hide_spinner();
        editor.save();
    }

    var url = "/bookmark/" + editor.misc_data["bookmark_id"] + "/edit";
    var data = new FormData();
    data.append("title", title_editor.value);
    data.append("url", url_editor.value);
    post(url, data, callback);
}

on_cancel = undefined;

function create_editors()
{
    var cards = document.getElementsByClassName("bookmark_card");
    for (var index = 0; index < cards.length; index += 1)
    {
        var card = cards[index];
        var title_div = card.getElementsByClassName("bookmark_title")[0];
        var url_div = card.getElementsByClassName("bookmark_url")[0];
        editor = new Editor([title_div, url_div], on_open, on_save, on_cancel);
        editor.misc_data["bookmark_id"] = card.dataset.bookmarkId;
    }
}
create_editors();
</script>
</html>