<!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/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/spinner.js"></script>
    <script src="/static/js/editor.js"></script>

<style>
#bookmark_list
{
    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;
    max-width: 500px;

    border-radius: 8px;
    box-shadow: 2px 2px 5px 0px var(--color_dropshadow);

    background-color: var(--color_secondary);
}
.bookmark_card .bookmark_url
{
    color: #aaa;
}
</style>
</head>


<body>
    {{header.make_header(session=session)}}
    <div id="content_body">
        <div id="bookmark_list">
            <h2>Bookmarks</h2>
            {% 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>

                <button
                class="red_button button_with_confirm"
                data-onclick="return delete_bookmark_form();"
                data-prompt="Delete Bookmark?"
                data-cancel-class="gray_button"
                >
                    Delete
                </button>
            </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="return create_bookmark_form();">Create</button>
            </div>
        </div>
    </div>
</body>


<script type="text/javascript">
function create_bookmark_form()
{
    const url = document.getElementById("new_bookmark_url").value.trim();
    const title = document.getElementById("new_bookmark_title").value.trim();
    if (!url)
    {
        return;
    }
    return api.bookmarks.create(url, title, common.refresh);
}

function delete_bookmark_form()
{
    api.bookmarks.delete('{{bookmark.id}}', common.refresh);
}

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

function on_save(ed, edit_element_map, display_element_map)
{
    function callback(response)
    {
        if (response.meta.status != 200)
        {
            ed.show_error("Status: " + response.meta.status);
            return;
        }

        ed.save();
        display_element_map["title"].href = response.data.url;
        display_element_map["url"].href = response.data.url;
    }

    edit_element_map["url"].value = edit_element_map["url"].value.trim();
    if (!edit_element_map["url"].value)
    {
        return;
    }

    const bookmark_id = ed.misc_data["bookmark_id"];
    const title = edit_element_map["title"].value;
    const url = edit_element_map["url"].value;

    ed.show_spinner();
    api.bookmarks.edit(bookmark_id, title, url, callback);
}

on_cancel = undefined;

function create_editors()
{
    const cards = document.getElementsByClassName("bookmark_card");
    for (const card of cards)
    {
        const title_div = card.getElementsByClassName("bookmark_title")[0];
        const url_div = card.getElementsByClassName("bookmark_url")[0];
        ed = new editor.Editor([title_div, url_div], on_open, on_save, on_cancel);
        ed.misc_data["bookmark_id"] = card.dataset.bookmarkId;
    }
}

function on_pageload()
{
    create_editors();
}
document.addEventListener("DOMContentLoaded", on_pageload);
</script>
</html>