{% extends 'base.html.twig' %}

{% block body %}
    {% set url="/"~appAlias~"/uploads/childheader/"~childheader.child.id~"/"~childheader.filename|replace({"thumb_":""}) %}
    <img id="image" class="d-block m-auto" src="{{url}}" style="max-width:100%; max-height:700px;">
    <div id="navigation" style="float:left;position:absolute;top:0px;width:100%"  class="d-flex align-items-stretch">
        {%if imageprev %}
            <a id="linkprev" href="{{ path("app_childheader_view",{id:imageprev.id}) }}" class="align-middle d-flex align-items-center justify-content-center" style="width:50%">
        {% endif %}
            <div class="text-left align-items-center justify-content-center" style="width:100%">
                {%if imageprev %}
                <div><i class="btn-link fas fa-arrow-left fa-2x"></i> </div>
                {% endif %}
            </div>
        {%if imageprev %}
            </a>
        {% endif %}

        {%if imagenext %}
            <a id="linknext" href="{{ path("app_childheader_view",{id:imagenext.id}) }}" class="align-middle d-flex align-items-center justify-content-center" style="width:50%">
        {% endif %}
            <div class="text-right align-items-center justify-content-center" style="width:100%">
                {%if imagenext %}
                    <div><i class="btn-link fas fa-arrow-right fa-2x"></i> </div>
                {%endif%}
            </div>
        {%if imagenext %}
            </a>
        {% endif %}
    </div>
{% endblock %}

{% block localscript %}
<script>
    $(document).ready(function() {
        $('body').imagesLoaded(function() {
            width=$('#mycontent').width();
            $('#navigation').width(width);

            height=$('#image').height();
            $('#navigation').height(height);
            $('body').focus();
        });

        $(document).keydown(function(event) {
            var key = (event.keyCode ? event.keyCode : event.which);

            if(key == 37) { // left
                var href = $('#linkprev').attr('href');
                if(href!=null) window.location.href = href;
            }
            else if(key == 39) {
                var href = $('#linknext').attr('href');
                if(href!=null) window.location.href = href;
            }
        });

    });
</script>
{% endblock %}