{% macro create_album_card(album, view="grid", unlink_parent=none, draggable=false) %}
{% set id = "album_card_root" if album == "root" else "album_card_" + album.id %}
{% set view = (view if view in ("list", "grid") else "grid") %}
{% set viewparam = "?view=list" if view == "list" else "" %}
<div
id="{{id}}"
class="album_card album_card_{{view}}"
data-id="{{album.id}}"
ondragstart="on_album_drag_start(event)"
ondragend="on_album_drag_end(event)"
ondragover="on_album_drag_over(event)"
ondrop="on_album_drag_drop(event)"
{% if album != "root" and draggable %}
draggable=true
{% endif %}
>
    {% if album == "root" %}
    <a class="album_card_thumbnail" href="/albums{{viewparam}}">
    {% else %}
    <a class="album_card_thumbnail" href="/album/{{album.id}}{{viewparam}}">
    {% endif %}
    <img src="/static/basic_thumbnails/album.png"/>
    </a>

    <div class="album_card_tools">
        {% if unlink_parent is not none %}
        <button
        class="remove_child_button button_with_confirm red_button"
        data-onclick="api.albums.remove_child('{{unlink_parent.id}}', '{{album.id}}', common.refresh)"
        data-prompt="Remove child?"
        data-holder-class="remove_child_button"
        data-confirm-class="red_button"
        data-cancel-class="gray_button"
        >Unlink
        </button>
        {% endif %}
    </div>

    <div class="album_card_title">
        {% if album == "root" %}
        <a href="/albums{{viewparam}}">Albums</a>
        {% else %}
        <a href="/album/{{album.id}}{{viewparam}}">{{album.display_name}}</a>
        {% endif %}
    </div>

    <div class="album_card_metadata">
        {% if album == "root" %}
        {% else %}
        {% set child_count = album.get_children()|length %}
        {% set photo_count = album.sum_photos(recurse=False) %}
        <span class="album_card_child_count" title="{{child_count}} children">{{child_count}}</span>
        {{-' | '-}}
        <span class="album_card_photo_count" title="{{photo_count}} photos">{{photo_count}}</span>
        {% endif %}
    </div>
</div>
{% endmacro %}