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

{% block metablock %}
    <meta property="og:title" content="{{ appName }} - Webzine - {{ page.webzine.name }}" />
    <meta property="og:description" content="le {{ page.webzine.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/webzine/"~page.illustration) }}" />
{% endblock %}

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

        /* Image */
        #webzine_webzine_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 prev is empty %}
            <a id="bigleft" href="{{ path("app_webzine_view",{"by":by,"idcat":prev[0].webzine.id,"id":prev[0].id})}}"><i class="fas fa-chevron-left fa-3x"></i></a>
        {% endif %}        
        {% if not next is empty %}
            <a id="bigright"  href="{{ path("app_webzine_view",{"by":by,"idcat":next[0].webzine.id,"id":next[0].id})}}"><i class="fas fa-chevron-right fa-3x"></i></a>
        {% endif %}

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

        
        <div class="container mb-5">
            <div class="text-center menuview" style="font-size:25px">
                {% if by=="home" %}
                    <a id="up" href="{{ path("app_home")}}#webzine{{webzine.id}}"><i class="fa fa-home" aria-hidden="true"></i></a>
                {% else %}
                    <a id="up" href="{{ path("app_home_user",{userpseudo:webzine.user.slug})}}#webzine{{webzine.id}}"><i class="fa fa-home" aria-hidden="true"></i></a>
                {% endif %}

                <a download="{{ webzine.name }}-{{page.order}}.{{ pathinfo.extension }}" href="/{{ appAlias }}/uploads/webzine/{{page.illustration}}"><i class="fa fa-download" aria-hidden="true"></i></a>

                {% if is_granted("ROLE_ADMIN") or (is_granted("ROLE_USER") and webzine.user.id==app.user.id) %}
                    <a id="update" href="{{ path("app_webzine_update",{"by":"illustration","id":webzine.id})}}"><i class="fa fa-file" aria-hidden="true"></i></a>
                    <a id="delete" href="{{ path("app_webzine_delete",{"by":"illustration","id":webzine.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>
                {% endif %}

            </div>

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

                {% for page in webzine.webzinepages %}
                    {% set height=30*90/21 %}
                    <a href="{{ path("app_webzine_view",{"by":by,"idcat":webzine.id,"id":page.id}) }}">
                        <div style="display: inline-block; width:90px; height:{{height}}px;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/webzine/thumbori_{{page.illustration}}"></div>
                    </a>
                {% endfor %}

                {% if sets|length > 1 %}
                    {% set height=30*90/21 %}
                    <h3 class="mt-3">Dans la même série</h3>
                    {% for set in sets %}
                        {% if not set.webzinepages is empty %}
                            <a href="{{ path("app_webzine_view",{"by":by,"idcat":set.id,"id":set.webzinepages[0].id}) }}">
                                <div style="display: inline-block; width:90px; height:{{height}}px;background-position: center ; background-size: cover; background-image: url(/{{ appAlias }}/uploads/webzine/thumbori_{{set.webzinepages[0].illustration}}"></div>
                            </a>
                        {% endif %}
                    {% endfor %}
                {% endif %}

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

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

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

        height=$("#webzine_webzine_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();
            $("#webzine_webzine_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 %}