{% extends "base.html" %}

{% block head %}
    <script src="/static/hammer.js"></script>
{% endblock %}

{% block content %}
    <div id="page">
        <a href="{{ prev_url }}" ondragstart="return false" id="prev-image">
            {% if not on_mobile %}
            <img src="/static/svg/chevron-left.svg" style="position: absolute; height: 7em; top: 50%; left: 50px" alt="">
            {% endif %}
        </a>
        <a href="{{ next_url }}" ondragstart="return false" id="next-image">
            {% if not on_mobile %}
            <img src="/static/svg/chevron-right.svg" style="position: absolute; height: 7em; top: 50%; right: 50px" alt="">
            {% endif %}
        </a>
        <a href="{{ next_url }}" ondragstart="return false">
            <img class="comic-page" ondragstart="return false" id="image" src="/comics/get_comic/{{ comic["id"] }}/{{ page_number }}" alt="">
        </a>
    </div>

    <script>
    let prev_image = document.getElementById("prev-image");
    let next_image = document.getElementById("next-image");
    let page = document.getElementById("page");
    let hammer = new Hammer(page);

    hammer.on("swiperight", function (ev) {
        prev_image.click();
    });
    hammer.on("swipeleft", function (ev) {
        next_image.click();
    });
    </script>

{% endblock %}