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

{% block localstyle %}
    #page-wrapper {
        min-height:0px !important;
    }

    .container-fluid {
        padding:0px;
    }

    #explorer {
        margin-right: -15px;
        margin-left: -15px;
    }
    
    .grid .grid-list .grid-item-logo {
        margin:0px;
    }

    .grid .grid-list .grid-item-title h2 {
        font-size: 14px;
        line-height: 18px;
        height: 18px
    }    

    .grid .grid-list .grid-item-title {
        padding:0px 0px 0px 5px;
        line-height: 10px;
    }

    .grid-item-title h2 {
        text-transform: initial !important;
    }

{% endblock %}

{% block pagewrapper %}

    <div id="explorer">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="margin-top:5px">
            {% if canupdate %}
                <div class="btn-group mr-2" role="group" aria-label="First group">
                    <a type="button" class="btn btn-primary" href="{{urlonly}}" target="_blank" title='Plus de fonctionnalités'>
                        <i class="fa fa-plus"></i>
                    </a>
                </div>
            {% endif %}

            <div class="btn-group mr-2" role="group" aria-label="Second group">
                {% if view=="small" %}
                    {%set action="list" %}
                {% else %}
                    {%set action="small" %}
                {% endif %}
                {% if not subdirectory is empty %}
                    <a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'subdirectory':subdirectory,'view':action }) }}" type="button" class="btn btn-primary">
                {% else %}
                    <a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'clear':true,'view':action }) }}" type="button" class="btn btn-primary">
                {% endif %}
                {% if view=="small" %}
                    <i class="fas fa-list"></i>
                {% else %}
                    <i class="fas fa-th"></i>
                {% endif %}
                </a>

                {% if sort=="title" %}
                    {%set action="updated" %}
                {% elseif sort=="updated" %}
                    {%set action="author" %}
                {% else %}
                    {%set action="title" %}
                {% endif %}
                {% if not subdirectory is empty %}
                    <a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'subdirectory':subdirectory,'sort':action }) }}" type="button" class="btn btn-primary">
                {% else %}
                    <a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'clear':true,'sort':action }) }}" type="button" class="btn btn-primary">
                {% endif %}
                {% if sort=="title" %}
                    <i class="fas fa-long-arrow-alt-down"></i> Nom
                {% elseif sort=="updated" %}
                    <i class="fas fa-long-arrow-alt-down"></i> Date
                {% else %}
                    <i class="fas fa-long-arrow-alt-down"></i> Utilisateur
                {% endif %}
                </a>                
            </div>
        </div>


        <div aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory, 'clear':true }) }}">Home</a></li>

                {% for parent in parents|reverse %}                  
                    <li class="breadcrumb-item"><a href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'subdirectory':parent.id }) }}">{{parent.name}}</a></li>
                {% endfor %}
                
            </ol>
        </div>        
        
        <div class="grid clearfix">
            <div class="grid-sizer  grid-{{view}}"></div>
            <div class="grid-gutter-sizer"></div>           


            {% for dir in files %}
                {% for folder in dir.folders %}
                    <div class="grid-item grid-{{view}}">
                        <div class="grid-item-content">                        
                            <a style="cursor:pointer" href="{{ path('app_portal_'~access~'_frame_only',{'directory':directory,'subdirectory':folder.info.id }) }}">
                                <div class="item-link clearfix">
                                    <div class="grid-item-logo">
                                        <img class="grid-item-img" height="110" src="{{ asset("images/files/dir.png") }}">
                                    </div>

                                    <div class="grid-item-title">
                                        <h2>{{ folder.info.title }}</h2>{% if view=="list" %}<small>le {{ folder.updatedformat }} par {{ folder.author }}</small>{%endif%}
                                    </div>                    
                                </div>
                            </a>
                        </div>
                    </div>                                    
                {% endfor %}

                {% for file in dir.files %}
                    <div class="grid-item grid-{{view}}">
                        <div class="grid-item-content">
                            <a href="{{ file.webUrl }}" target="_blank">
                                <div class="item-link clearfix">
                                    <div class="grid-item-logo">
                                        {% if file.fileExst ==".png" or file.fileExst ==".jpg" or file.fileExst ==".jpeg" or file.fileExst ==".svg" or file.fileExst ==".gif"%}
                                        <img class="grid-item-img" height="110" src="{{ file.viewUrl }}">                                        
                                        {% else %}
                                        <img class="grid-item-img" height="110" src="{{ asset("images/files/"~(file.fileExst | replace({".":""}))~".png") }}">                                        
                                        {% endif %}
                                    </div>

                                    <div class="grid-item-title">
                                        <h2>{{ file.title }}</h2>{% if view=="list" %}<small>le {{ file.updatedformat }} par {{ file.author }}</small>{%endif%}
                                    </div>                              
                                </div>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    </div>

    {% if not tasks is empty %}
        <div id="onlytasks" style='margin-top:20px;'>
            {% if apponly==0 %}
            <h4 style='margin-bottom:5px;border-bottom:1px solid;'>Tâches</h4>
            {%endif%}

            {% if apponly==0 or apponly==2 %}
                {% for task in tasks %}
                    <li>{{ task.title }}</li>
                    {% if not task.subtasks is empty %}
                        <ul>
                        {% for subtask in task.subtasks %}
                            <li>{{ subtask.title }}</li>
                        {% endfor %}
                        </ul>
                    {% endif %}
                {% endfor %}
            {%endif%}
        </div>
    {% endif %}    
{% endblock %}


{% block localjavascript %}
    var optiongrid={columnWidth: '.grid-sizer',itemSelector: '.grid-item', gutter: '.grid-gutter-sizer'};
    

    // Création des grilles d'items
    $('body').imagesLoaded(function() {
        var grid = $('.grid').masonry(optiongrid);        
        ajust();
    });

    $('document').ready(function(){
        if(inIframe()) {
            color=$("#frame-{{directory}}",window.parent.document).data("color");
        }
        else {
            color = "#{{ color["main"]}}";
        }

        $(".grid-item-title > h2").css("color",color);      
        $(".grid-item-title > small").css("color",color);      
        $("#onlytasks").css("color",color);      
    });

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


    function ajust(formodal) {    
        if(inIframe()) {
            frame=$("#frame-{{directory}}",window.parent.document);
            widgetbody=frame.parent();

            if(!frame.hasClass("notframeajust")&&widgetbody.css("display")=="block")  {
                $("#frame-{{directory}}",window.parent.document).height($("#page-wrapper").height() + 10);
            }           
        }
    }   
{% endblock %}



