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

{% block localstyle %}
<style>
body {
    background-color: var(--colorbgbodydark);
}
img { 
    margin:auto;
    display: block;
}
#page {
    padding: 0px !important;
    
}
h3, #filetitle {
    margin:0px;
    text-align:center;
}
h3, a, a:hover {
    color: var(--colorfttitledark);
}
#fileaction {
    margin-top: -10px;
}
#bigright{
    position:absolute;
    top:0px;
    right:0px;
    width:45%;
    height:100%;
    line-height:100%;
    text-align: right;
    vertical-align: middle;
    padding:5px;
}
#bigleft{
    position:absolute;
    top:0px;
    left:0px;
    width:45%;
    height:100%;
    vertical-align: middle;
    padding:5px;            
}

</style>
{% endblock %}

{% block body %}
    <div id="filetitle">
        <h3>{{basename}}</h3>
        <div id="fileaction">
            <a href="{{ path("app_"~access~"_file_download",{category:category, id:id, file:file, usage:usage})}}"><i class="fa-solid fa-download"></i></a>
            {%if canadd %}
                &nbsp;&nbsp;&nbsp;<a href="{{ path("app_"~access~"_file_delete",{category:category, id:id, file:file, usage:usage, navigation: navigation})}}" data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?"><i class="fa-solid fa-trash"></i></a>
            {%endif%}
        </div>
    </div>
    
    {% if navigation %}
        {% if not next is empty %}
            <a id="bigleft"  href="{{ path("app_"~access~"_file_view",{category:category, id:id, file:next.Key, usage:usage, navigation: navigation})}}"><i class="fas fa-chevron-left fa-3x"></i></a>
        {% endif %}
        {% if not prev is empty %}
            <a id="bigright"  href="{{ path("app_"~access~"_file_view",{category:category, id:id, file:prev.Key, usage:usage, navigation: navigation})}}"><i class="fas fa-chevron-right fa-3x"></i></a>
        {% endif %} 
    {% endif %}

    {% if isimage %}
        <img id="fileimage" style="display:none" src="{{path("app_"~access~"_file_show",{category:category, id:id, file:file, usage:usage})}}">
    {%else%}
        <iframe src="{{path("app_"~access~"_file_show",{category:category, id:id, file:file, usage:usage})}}" style="width:100%;height:600px"></iframe>
    {%endif%}
{% endblock %}


{% block localscript %}

<script>

    function resize() {
        height=$(window).height()-($("#filetitle").height() * 2);

        $("#fileimage").css({height:height,width:'auto'});
        width=$(window).width()-90;
        console.log(width);
        if($("#fileimage").width()>width) {
            $("#fileimage").css({width:width,height:'auto'});
            $("#fileimage").css("margin-top",(height/2)-($("#fileimage").height()/2)+"px");
            height=$(window).height();
        }

        height=$(window).height()-($("#filetitle").height() * 2);
        $("#bigright").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})
        $("#bigleft").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})

        $("#fileimage").show();
    }

    $('#fileimage').imagesLoaded(function() {
        resize();
    });

    $("body").keydown(function(e) {
        if(e.keyCode == 37) { // left
            var href = $('#bigleft').attr('href');
            if(href!=null) window.location.href = href;
        }
        else if(e.keyCode == 39) {
            var href = $('#bigright').attr('href');
            if(href!=null) window.location.href = href;
        }
    });

    $(window).resize(function() {
        resize();
    });

</script>

{% endblock %}