<!DOCTYPE html5>
<html>
<head>
    {% import "photo_card.html" as photo_card %}
    {% import "header.html" as header %}
    {% import "clipboard_tray.html" as clipboard_tray %}
    <title>{{album.display_name}} | Albums</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/clipboard_tray.css">
    <link rel="stylesheet" href="/static/css/photo_card.css">
    <script src="/static/js/common.js"></script>
    <script src="/static/js/albums.js"></script>
    <script src="/static/js/editor.js"></script>
    <script src="/static/js/hotkeys.js"></script>
    <script src="/static/js/photoclipboard.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_text
{
    font-family: initial;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.1);
}
#description_editor textarea
{
    width: 100%;
}
</style>
</head>


<body>
{{header.make_header(session=session)}}
<div id="content_body">
    <h2>
        <span data-editor-id="title" data-editor-empty-text="{{album.id}}" data-editor-placeholder="title" id="title_text">{{album.display_name}}</span>
    </h2>
    <pre
    id="description_text"
    data-editor-id="description"
    data-editor-placeholder="description"
    {% if not album.description %}class="hidden"{% endif %}
    >
        {{-album.description-}}
    </pre>

    <ul>
        {% set viewparam = "?view=list" if view == "list" else "" %}
        {% set parents = album.get_parents() %}
        {% if parents %}
        {% for parent in parents %}
        <li><a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></li>
        {% endfor %}
        {% else %}
        <li><a href="/albums">Albums</a></li>
        {% endif %}

        <ul>
            <li>{{album.display_name}}</li>
            <ul>
                {% set sub_albums = album.get_children() %}
                {% for sub_album in sub_albums|sort(attribute='title') %}
                <li><a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a></li>
                {% endfor %}
                <li>
                    <button id="create_child_prompt_button" class="green_button" onclick="albums.open_creator_prompt(event);">Create child</button>
                    <input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title">
                    <button id="create_child_submit_button" class="green_button hidden" onclick="albums.submit_create_child(event);">Create</button>
                    <button id="create_child_cancel_button" class="red_button hidden" onclick="albums.cancel_create_child(event);">Cancel</button>
                </li>
            </ul>
        </ul>
    </ul>

    {% set photos = album.get_photos() %}
    {% if photos %}
        <h3>{{photos|length}} 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 %}

    <p>
        {% set has_local_photos = photos|length > 0 %}
        {% set has_child_photos = album.has_any_subalbum_photo() %}
        {% if has_local_photos or has_child_photos %}
            Download:
            {% if has_local_photos %}
                <a href="/album/{{album.id}}.zip?recursive=no">
                    These files ({{album.sum_bytes(recurse=False)|bytestring }})
                </a>
            {% endif %}
            {% if has_local_photos and has_child_photos %}&mdash;{% endif %}
            {% if has_child_photos %}
                <a href="/album/{{album.id}}.zip?recursive=yes">
                    Include children ({{album.sum_bytes(recurse=True)|bytestring }})
                </a>
            {% endif %}
        {% endif %}
    </p>
    {{clipboard_tray.clipboard_tray()}}
</div>
</body>


<script type="text/javascript">
var ALBUM_ID = "{{album.id}}";

function _paste_unpaste_photo_clipboard(add_or_remove)
{
    var photo_ids = Array.from(photo_clipboard).join(",");
    var url = "/album/{{album.id}}/" + add_or_remove;
    var data = new FormData();
    data.append("photo_id", photo_ids);
    var callback = function(response)
    {
        if (response["meta"]["status"] !== 200)
        {
            return;
        }
        save_photo_clipboard();
        location.reload();
    };
    common.post(url, data, callback);
}
function paste_photo_clipboard()
{
    _paste_unpaste_photo_clipboard("add_photo");
}
function unpaste_photo_clipboard()
{
    _paste_unpaste_photo_clipboard("remove_photo");
}
var paste_photo_clipboard_button = document.createElement("button");
paste_photo_clipboard_button.classList.add("green_button");
paste_photo_clipboard_button.innerText = "Add to this album";
paste_photo_clipboard_button.onclick = paste_photo_clipboard;
document.getElementById("clipboard_tray_toolbox").appendChild(paste_photo_clipboard_button);

var unpaste_photo_clipboard_button = document.createElement("button");
unpaste_photo_clipboard_button.classList.add("red_button");
unpaste_photo_clipboard_button.innerText = "Remove from this album";
unpaste_photo_clipboard_button.onclick = unpaste_photo_clipboard;
document.getElementById("clipboard_tray_toolbox").appendChild(unpaste_photo_clipboard_button);

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

function on_save(editor, edit_element_map, display_element_map)
{
    function callback()
    {
        var title_display = display_element_map["title"];
        var description_display = display_element_map["description"];

        editor.hide_spinner();
        editor.save();
        document.title = title_display.innerText + " | Albums";
        if (description_display.innerText == "")
        {
            description_display.classList.add("hidden");
        }
    }

    var title_editor = edit_element_map["title"];
    title_editor.value = title_editor.value.trim();
    var description_editor = edit_element_map["description"];

    var url = "/album/{{album.id}}/edit";
    var title = edit_element_map["title"].value.trim();
    var description = edit_element_map["description"].value;
    var data = new FormData();
    data.append("title", title_editor.value);
    data.append("description", description_editor.value);

    editor.show_spinner();
    common.post(url, data, callback);
}

function on_cancel(editor, edit_element_map, display_element_map)
{
    editor.cancel();
    if (display_element_map["description"].innerText == "")
    {
        display_element_map["description"].classList.add("hidden");
    }
}

var title_text = document.getElementById("title_text");
var description_text = document.getElementById("description_text");
var editor = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
</script>
</html>