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

{% block metablock %}
    <meta property="og:title" content="{{ appName }} - {{ illustration.category.name }} - {{ illustration.name }}" />
    <meta property="og:description" content="le {{ illustration.submittime|date('d/m/Y H:i') }}" />
    <meta property="og:url" content="{{ absolute_url(path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params'))) }}" />
    <meta property="og:image" content="{{ absolute_url("/"~appAlias~"/uploads/illustration/"~illustration.illustration) }}" />
{% endblock %}

{% block localstyle %}
    <style>
    #main {
        padding: 0px; 
        display:none;
        margin-bottom:200px;
    }

        /* Image */
        #illustration_illustration_img, #kadavresky_kadavresky_img, #album_photo_img,#webzine_page_img{
            margin: 30px auto 0px auto;
            display:block;
            /*box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.45);*/
        }

        #bigright{
            position:absolute;
            top:30px;
            right:0px;
            width:45%;
            height:100%;
            line-height:100%;
            text-align: right;
            vertical-align: middle;
            padding:5px;
        }
        #bigleft{
            position:absolute;
            top:30px;
            left:0px;
            width:45%;
            height:100%;
            vertical-align: middle;
            padding:5px;            
        }

        .menuview a {
            margin: 0px 5px;
        }

    </style>

        {% if not next is empty %}
            <a id="bigleft"  href="{{ path("app_illustration_view",{"idcat":next[0].category.id,"id":next[0].id})}}"><i class="fas fa-chevron-left fa-3x"></i></a>
        {% endif %}
        {% if not prev is empty %}
            <a id="bigright" href="{{ path("app_illustration_view",{"idcat":prev[0].category.id,"id":prev[0].id})}}"><i class="fas fa-chevron-right fa-3x"></i></a>
        {% endif %}        


        <img style="display:none;" id="illustration_illustration_img" src="/{{ appAlias }}/uploads/illustration/{{illustration.illustration}}">

        
        <div class="container mb-5">
            <div class="text-center menuview" style="font-size:25px">
                <a id="up" href="{{ path("app_home")}}#illustration{{illustration.id}}"><i class="fa fa-home" aria-hidden="true"></i></a>
                <a download="{{ illustration.name }}.{{ pathinfo.extension }}" href="/{{ appAlias }}/uploads/illustration/{{illustration.illustration}}"><i class="fa fa-download" aria-hidden="true"></i></a>

                {% if is_granted("ROLE_ADMIN") %}
                    <a id="update" href="{{ path("app_illustration_update",{"id":illustration.id})}}"><i class="fa fa-file" aria-hidden="true"></i></a>
                    <a id="delete" href="{{ path("app_illustration_delete",{"id":illustration.id})}}" data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?"><i class="fa fa-trash" aria-hidden="true"></i></a>
                    <a id="recadre" style="cursor:pointer" onClick="ModalLoad('extraLargeModal','Illustration','{{ path('app_illustration_crop',{"type":"illustration","reportinput":"none"}) }}?file={{illustration.illustration}}');"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a>
                {% endif %}

            </div>

            <div class="text-center" style="clear:both;"><h3>{{ illustration.name }}</h3><small>le {{ illustration.submittime|date('d/m/Y H:i') }}</div>

            <div class="illustration_description" style="clear:both;max-width: 350px;margin: auto; text-align: justify;">
                {% autoescape 'html' %}
                {{ illustration.description|raw }}
                {% endautoescape %}
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    function resizeImage() {
        height=$(window).height()-70;
        $("#illustration_illustration_img").css({height:height,width:'auto'});

        width=$(window).width()-90;
        if($("#illustration_illustration_img").width()>width)
            $("#illustration_illustration_img").css({width:width,height:'auto'});

        height=$("#illustration_illustration_img").height();
        $("#bigright").css({height:height,"line-height":height+"px"});
        $("#bigleft").css({height:height,"line-height":height+"px"});            
    }

    $(document).ready(function() {
        $('body').imagesLoaded(function() {
            resizeImage();
            $("#illustration_illustration_img").fadeIn();
        });
    });

    $("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() {
        resizeImage();
    });
{% endblock %}