{% extends "../base.html" %}

{% block head %}
    <script defer type="module" src="{{fix_static('js/kangaroo_comics/comics.js')}}"></script>
{% end %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{fix_static('css/kangaroo_comics.css')}}">
{% end %}

{% block body %}
    <noscript>Da diese Seite die Comics direkt von Zeit Online holt, benötigt sie JavaScript. Sorry :(</noscript>

    <div id="comic-content-container">
        <h1>
            <a id="current-comic-header"
               class="comic-header">Aktueller Comic:</a>
        </h1>
        <div id="current-img-container">
            <img id="current-img"
                 class="normal-img"
                 alt="Aktueller Comic"
                 {# crossorigin #}
                 src="">
        </div>
        <h1>Alte Comics:</h1>
        <ul id="old-comics-list"></ul>
        <input id="load-button"
               type="button"
               value="Lade mehr Comics!">
    </div>
    {% if no_3rd_party %}
        <button id="start-button-no_3rd_party">Lade Inhalte von Zeit Online</button>
    {% end %}
{% end %}
