<!DOCTYPE html5>
<html>
<head>
    {% import "photo_card.html" as photo_card %}
    {% import "header.html" as header %}
    <title>Album {{album.display_name}}</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/common.css">
    <script src="/static/common.js"></script>

<style>
p
{
    word-break: break-word;
}
#content_body
{
    /* overriding common.css here */
    display: block;
}
#title_editor,
#description_editor
{
    width: 100%;
    max-width: 800px;
}
#description_editor textarea
{
    width: 100%;
    height: 100%;
}
#description_editor
{
    height: 100px;
}
.hidden
{
    display: none;
}
</style>
</head>


<body>
{{header.make_header(session=session)}}
<div id="content_body">
    <h2>
    {% if album.title %}
        <span id="title_text">{{album.title}}</span>
    {% else %}
        <span id="title_text">Album {{album.id}}</span>
    {% endif %}
    <input id="title_editor" class="hidden" type="text" value="{{album.title}}" placeholder="title">
    <button id="edit_button" class="green_button" onclick="start_editing()">edit</button>
    </h2>

    <p id="description_text">{{album.description}}</p>

    <div id="description_editor" class="hidden">
        <textarea id="description_editor_box" placeholder="description">{{album.description}}</textarea>
        <span>
            <button id="save_button" class="green_button" onclick="finish_editing(true)">Save</button>
            <button id="cancel_button" class="red_button" onclick="finish_editing(false)">Cancel</button>
        </span>
        <span id="edit_submitting_spinner">Submitting...</span>
    </div>

    {% set viewparam = "?view=list" if view == "list" else "" %}
    {% set parent = album.parent() %}
    {% if parent %}
    <h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3>
    {% else %}
    <h3>Parent: <a href="/albums">Albums</a></h3>
    {% endif %}

    {% set sub_albums = album.children() %}
    {% if sub_albums %}
    <h3>Sub-albums</h3>
    <ul>
        {% for sub_album in sub_albums|sort(attribute='title') %}
        <li><a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}

    {% set photos = album.photos() %}
    {% if photos or sub_albums %}
    <span>
        Download:
        {% if photos %}
            <a href="/album/{{album.id}}.zip?recursive=no">
                These files ({{album.sum_bytes(recurse=False, string=True)}})
            </a>
        {% endif %}
        {% if sub_albums %}
            <a href="/album/{{album.id}}.zip?recursive=yes">
                Include children ({{album.sum_bytes(recurse=True, string=True)}})
            </a>
        {% endif %}
    </span>
    {% endif %}

    {% if photos %}
        <h3>Photos</h3>
        {% if view != "list" %}
            <a href="?view=list">List view</a>
        {% else %}
            <a href="?view=grid">Grid view</a>
        {% endif %}
        <ul>
        {% for photo in photos %}
            {{photo_card.create_photo_card(photo, view=view)}}
        {% endfor %}
        </ul>
    {% endif %}
</div>
</body>


<script type="text/javascript">
var edit_button = document.getElementById("edit_button");
var save_button = document.getElementById("save_button");
var cancel_button = document.getElementById("cancel_button");

var title_text = document.getElementById("title_text");
var title_editor = document.getElementById("title_editor");
var description_text = document.getElementById("description_text");
var description_editor = document.getElementById("description_editor");
var description_editor_box = document.getElementById("description_editor_box");
var edit_submitting_spinner = document.getElementById("edit_submitting_spinner");

bind_box_to_button(title_editor, save_button);

var title_is_blank = {{ (album.title == '')|int }};
var blank_title_text = "Album {{album.id}}";

function submit_tag(callback)
{
    add_photo_tag('{{album.id}}', add_tag_box.value, callback);
    add_tag_box.value = "";
}

function show_editor()
{
    edit_button.classList.add("hidden");
    edit_submitting_spinner.classList.add("hidden");

    title_text.classList.add("hidden");
    title_editor.classList.remove("hidden");

    description_text.classList.add("hidden");
    description_editor.classList.remove("hidden");
}

function show_spinner()
{
    edit_submitting_spinner.classList.remove("hidden");
}

function hide_editor()
{
    edit_button.classList.remove("hidden");
    edit_submitting_spinner.classList.add("hidden");

    title_text.classList.remove("hidden");
    title_editor.classList.add("hidden");

    description_text.classList.remove("hidden");
    description_editor.classList.add("hidden");
}

function start_editing()
{
    if (title_is_blank)
    {
        title_editor.value = "";
    }
    else
    {
        title_editor.value = title_text.innerText;
    }
    show_editor();
    title_editor.focus();
    description_editor_box.value = description_text.innerText;
}

function finish_editing(do_save)
{
    if (do_save === true)
    {
        var title = title_editor.value;
        var description = description_editor_box.value;

        var url = "/album/{{album.id}}/edit";
        var data = new FormData();
        data.append("title", title);
        data.append("description", description);

        show_spinner();
        post(url, data, callback_edit);
    }
    else
    {
        hide_editor();
    }

}

function callback_edit(response)
{
    console.log(response);
    if (response["_status"] == 200)
    {
        if (response["title"] === "")
        {
            document.title = "Album {{album.id}}";
            title_text.innerText = blank_title_text;
            title_is_blank = true;
        }
        else
        {
            document.title = "Album " + response["title"];
            title_text.innerText = response["title"];
            title_is_blank = false;
        }
        description_text.innerText = response["description"];
        hide_editor();
    }
}
</script>
</html>