{% macro shared_style() %}
    <link href="/static/stylesheets/reset.css" rel="stylesheet" />
    <style>
        body {
            font-family: sans-serif;
            font-size: 1rem;
            background-color: #222222;
            color: whitesmoke;
            margin: .8rem;
            margin-top: 0;
            line-height: 1.24;
        }
        table tr th, table tr td {
            margin: 0;
            padding: .2em;
            border: solid white 1px;
        }
        table tr:nth-child(even) {
            background-color: #333333;
        }
        a:any-link {
            text-decoration: none;
            color: lightcyan;
        }
        h1, h2 {
            margin: 1rem 0 .5rem;
        }
        ul {
            margin: .5rem 0;
        }
        form.form-single-button {
            display: inline-block;
        }
        button,
        .button {
            font-size: .92em;
            margin: .2rem;
            padding: .16rem .2rem;
            background-color: rgb(153, 50, 204);
            color: whitesmoke;
            border-radius: .3rem;
            border: none;
            cursor: pointer;
            word-break: keep-all;
            white-space: nowrap;
        }
        button:disabled {
            background-color: rgb(98, 67, 113);
            color: gray;
            cursor: default;
        }
        .button-list {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
        }
        @media screen and (max-width: 700px) {
            .button-list {
                flex-direction: column;
            }
        }
        /* navigation */
        .navigation {
            position: sticky;
            z-index: 1000;
            top: 0;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            justify-content: center;
            gap: .8rem;
            --height: 2.4em;
            width: max-content;
            height: var(--height);
            border-radius: 0 0 var(--height) var(--height);
            margin: 0 auto;
            padding: 1.2em 1.6em;

            background-color: #333333;
            box-shadow: 0 0 .2rem .4rem #444444;

            font-size: 1.2rem;
        }
        /* media element */
        .element_view {
            display: flex;
            flex-wrap: wrap-reverse;
            justify-content: space-between;
            align-items: flex-end;
        }
        .element_view > .thumbnail_img {
            display: block;
            margin: .4rem;
            order: 90;
            width: 420px;
            max-width: 100%;
        }
        .element_view > .element_info {
            display: block;
        }
        .element_view > .element_info > .description {
            display: block;
            font-size: .8rem;
            max-width: 100%;
            max-height: 16rem;
            overflow-x: scroll;
            overflow-y: scroll;
            white-space: pre-wrap;
            unicode-bidi: embed;
        }
    </style>
{% endmacro %}

{% macro hidden_redirect_back(fragment="") %}
    <input type="hidden" name="redirect" value="{{ this_url() }}{{ ('#' + fragment) if fragment else '' }}"/>
{% endmacro %}

{% macro no_input_post_form(uri, text, fragment="") -%}
    <form class="form-single-button" method="POST" action="{{ uri }}">
        {{ hidden_redirect_back(fragment=fragment) }}
        <button>{{ text }}</button>
    </form>
{%- endmacro %}

{% macro post_form(uri, key, val, text, fragment="") %}
    <form class="form-single-button" method="POST" action="{{ uri }}">
        {{ hidden_redirect_back(fragment=fragment) }}
        {% if caller is defined %}
            {{ caller() }}
        {% endif %}
        <button name="{{ key }}" value="{{ val }}">{{ text }}</button>
    </form>
{% endmacro %}

{% macro as_play_link(element, symbol='&#9654;&#65039;') -%}
    {# TODO do not hardcode certain extractors here #}
    {% if element.extractor_name in ["ytdl", "youtube"] %}
        {%- set opts = {
            "video_uri": element.uri,
            "start": element.progress,
        } -%}
        <a class="button play_button" href="entertainment-decider:///player/play?{{ opts | encode_options }}">{{ symbol | safe }}</a>
    {% endif %}
{%- endmacro -%}

{% macro _navigation() %}
    {% set links = {
        "&#x1f3e0; Home"|safe: "/",
        "Latest Media": "/media",
        "Short Media": "/media/short",
        "Long Media": "/media/long",
        "Unsorted": "/media/unsorted",
        "Collections": "/collection",
        "All Collections": "/collection/all",
        "&#x1f4cc; Collections"|safe: "/collection/pinned",
        "Collections To Watch": "/collection/to_watch",
        "Statistics": "/stats",
        "Tags": "/tag",
        "Add Media": "/media/extract",
        "Add Collection": "/collection/extract",
    } %}
    <div class="navigation">
        {% for name, uri in links.items() %}
            <a class="button" href="{{ uri }}">{{ name }}</a>
        {% endfor %}
        {{ no_input_post_form("/api/refresh/collections", "&#x1f504;"|safe) }}
    </div>
{%- endmacro %}

{% macro body_header() %}
    {{ _navigation() }}
{%- endmacro %}

{% macro media_element_buttons(element, show_fragment=True) %}
    {% set api_uri = "/api/media/" + element.id|string %}
    {% set fragment = ("media_element_" + element.id|string) if show_fragment else None %}
    {{ as_play_link(element) }}
    {% if element.watched %}
        {{ post_form(api_uri, "watched", "false", "Unmark &#9989;"|safe, fragment) }}
    {% elif element.ignored %}
        {{ post_form(api_uri, "ignored", "false", "Unmark &#10062;"|safe, fragment) }}
    {% else %}
        {{ post_form(api_uri, "watched", "true", "&#9989;"|safe, fragment) }}
        {{ post_form(api_uri, "ignored", "true", "&#10062;"|safe, fragment) }}
    {% endif %}
{% endmacro %}

{% macro link_position_marker(link, prefix=false) -%}
    {{- prefix and (link.season != 0 or link.episode != 0) | tenary(", ", "") -}}
    {%- if link.season != 0 -%}
        Season {{ link.season }}
        {{- (link.episode != 0) | tenary(", ", "") -}}
    {%- endif -%}
    {%- if link.episode != 0 -%}
        Episode {{ link.episode }}
    {%- endif -%}
{%- endmacro %}

{% macro media_entry_content(element, show_fragment=True) %}
    {{ media_element_buttons(element, show_fragment=show_fragment) }}
    {{ element.release_date.strftime("%d.%m.%Y") }}
    {{ element.length | timedelta }}
    <a href="{{ element.info_link }}">{{ element.title }}</a>
{%- endmacro %}

{% macro link_entry_content(link, show_fragment=True) %}
    {{ media_entry_content(link.element, show_fragment=show_fragment) -}}
    {{- link_position_marker(link, prefix=true) -}}
{%- endmacro %}

{% macro collection_entry_content(collection) %}
    <a href="{{ collection.info_link }}">{{ collection.title }}</a>
{%- endmacro %}

{% macro media_entry(element, show_fragment=True) %}
    <li id="media_element_{{ element.id }}">
        {{ media_entry_content(element, show_fragment=show_fragment) }}
    </li>
{%- endmacro %}

{% macro link_entry(link, show_fragment=True) %}
    <li id="media_element_{{ link.element.id }}">
        {{ link_entry_content(link, show_fragment=show_fragment) }}
    </li>
{%- endmacro %}

{% macro collection_entry(collection) %}
    <li id="media_collection_{{ collection.id }}">
        {{ collection_entry_content(collection, show_fragment=show_fragment) }}
    </li>
{%- endmacro %}

{% macro media_table(media_list) %}
    <table>
        <tr>
            <th>Date</th>
            <th>&#9202;&#65039;</th>
            <th></th>
            <th>Title</th>
        </tr>
        {% for media in media_list %}
            <tr>
                <td>
                    {{- media.release_date.strftime("%d.%m.%Y") -}}
                </td>
                <td>
                    {{- media.left_length | timedelta -}}
                </td>
                <td class="button-list">
                    {{- media_element_buttons(media) -}}
                </td>
                <td><a href="{{ media.info_link }}">{{ media.title }}</a></td>
            </tr>
        {% endfor %}
    </table>
{%- endmacro %}

{% macro link_differ_table(link_list) %}
    <table>
        <tr>
            <th>Date</th>
            <th>&#9202;&#65039;</th>
            <th></th>
            <th>Title</th>
            <th>From Collection</th>
        </tr>
        {% for link in link_list %}
            <tr>
                <td>
                    {{- link.element.release_date.strftime("%d.%m.%Y") -}}
                </td>
                <td>
                    {{- link.element.left_length | timedelta -}}
                </td>
                <td class="button-list">
                    {{- media_element_buttons(link.element) -}}
                </td>
                <td>
                    <a href="{{ link.element.info_link }}">{{ link.element.title }}</a>
                </td>
                <td>
                    <a href="{{ link.collection.info_link }}">{{ link.collection.id }}</a>
                    {{- link_position_marker(link, prefix=true) -}}
                </td>
            </tr>
        {% endfor %}
    </table>
{%- endmacro %}