{% macro shared_style() %}
    <style>
        table tr th, table tr td {
            margin: 0;
            padding: .2em;
            border: solid black 1px;
        }
        table tr:nth-child(even) {
            background-color: #eeeeee;
        }
        a:link {
            text-decoration: none;
            color: darkblue;
        }
        a:visited {
            text-decoration: none;
            color: darkblue;
        }
        a:hover {
            text-decoration: none;
        }
        a:active {
            text-decoration: none;
        }
        form.form-single-button {
            display: inline-block;
        }
        form.form-single-button button,
        .button {
            padding: .1rem .2rem;
            margin: 0 .1rem;
            background-color: lightcoral;
            border-radius: .3rem;
        }
    </style>
{% endmacro %}

{% macro hidden_redirect_back(fragment="") %}
    <input type="hidden" name="redirect" value="{{ url_for(request.endpoint, **request.view_args) }}{{ ('#' + 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) }}
        <button name="{{ key }}" value="{{ val }}">{{ text }}</button>
    </form>
{% endmacro %}

{% macro as_play_link(element) -%}
    {%- set opts = {
        "video_uri": element.uri,
        "start": element.progress,
    } -%}
    <a class="button" href="entertainment-decider:///player/play?{{ opts | encode_options }}">Play</a>
{%- endmacro -%}

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

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

{% macro media_element_buttons(element) %}
    {% set api_uri = "/api/media/" + element.id|string %}
    {% set fragment = "media_element_" + element.id|string %}
    {{ as_play_link(element) }}
    {% if element.watched %}
        {{ post_form(api_uri, "watched", "false", "Unmark as Watched", fragment) }}
    {% elif element.ignored %}
        {{ post_form(api_uri, "ignored", "false", "Unmark as Ignored", fragment) }}
    {% else %}
        {{ post_form(api_uri, "watched", "true", "Watched", fragment) }}
        {{ post_form(api_uri, "ignored", "true", "Ignore", 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) %}
    {{ media_element_buttons(element) }}
    {{ element.release_date.strftime("%d.%m.%Y") }}
    {{ element.length | timedelta }}
    <a href="{{ element.info_link }}">{{ element.title }}</a>
{%- endmacro %}

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

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

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

{% macro media_table(media_list) %}
    <table>
        <tr>
            <th>Date</th>
            <th>To Watch</th>
            <th>Actions</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>
                    {{ 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>To Watch</th>
            <th>Actions</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>
                    {{ 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 %}