<!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_text
{
    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-placeholder="title" id="title_text">
        {%- if album.title -%}
            {{album.title}}
        {%- else -%}
            Album {{album.id}}
        {%- endif -%}
        </span>
    </h2>
    <p data-editor-id="description" data-editor-placeholder="description" id="description_text" {% if album.description == "" %}class="hidden"{% endif %}>{{album.description}}</p>

    {% 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() %}
    <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 %}
        <li><button class="green_button" onclick="var parent='{{album.id}}'; create_album_and_follow(parent);">Create child</button></li>
    </ul>

    {% set photos = album.photos() %}
    {% 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 %}
    <p>
        {% if photos or sub_albums %}
            Download:
            {% if photos %}
                <a href="/album/{{album.id}}.zip?recursive=no">
                    These files ({{album.sum_bytes(recurse=False, string=True)}})
                </a>
            {% endif %}
            {% if photos and sub_albums %}&mdash;{% endif %}
            {% if sub_albums %}
                <a href="/album/{{album.id}}.zip?recursive=yes">
                    Include children ({{album.sum_bytes(recurse=True, string=True)}})
                </a>
            {% endif %}
        {% endif %}
    </p>
</div>
</body>


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

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

function on_save(editor, edit_element_map, display_element_map)
{
    var title_editor = edit_element_map["title"];
    var description_editor = edit_element_map["description"];

    editor.show_spinner();
    function callback()
    {
        editor.hide_spinner();
        editor.save();
        if (title_text.innerText == "")
        {
            document.title = blank_title_text;
            title_text.innerText = blank_title_text;
        }
        else
        {
            document.title = "Album " + title_text.innerText;
        }
        if (description_text.innerText == "")
        {
            description_text.classList.add("hidden");
        }
    }

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

function on_cancel(editor, edit_element_map, display_element_map)
{
    editor.cancel();
    if (display_element_map["title"].innerText == "")
    {
        display_element_map["title"].innerText = blank_title_text;
    }
    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([title_text, description_text], on_open, on_save, on_cancel);
</script>
</html>