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

{% block localstyle %}
<style>
    body { height:auto;}
    #page { padding: 0px !important;}
    .btn-group>.btn, .btn-group>.btn:active{ 
        background-color: var(--colorbgbodydark);
        border: var(--colorbgbodydark);
    }
    .btn-group>.btn:active{ 
        background-color: var(--colorbgbodydark-darker);
        border: var(--colorbgbodydark);
    }    
    .item-small .item-subtitle, .item-list .item-subtitle {
        display:block;
    }
    .item-small .item-subtitle {
        font-size:9px;
    }
    .item-small img {
        width:60px;

    }
    .item-list {
        zoom:80%;
    }
    .item-list img {
        width:40px;
        
    }
    .breadcrumb {
        padding: 5px 10px;
        margin: 5px 0px 5px 0px;
        list-style: none;
        border-radius: 4px;        
        background-color: var(--colorbgbodydark);
        display: inline-flex;

    }
    .breadcrumb a {
        color: var(--colorftbodydark);
    }
    .item-action .btn-modal {
        color: inherit;
    }

</style>
{% endblock %}
{% block body %}

    <div id="explorer">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            {% if canadd and not fgtrash %}
                <div class="btn-group me-1" role="group" aria-label="First group">
                    <button type="button" class="btn btn-modal btn-primary"data-modalid="mymodalfull" data-modaltitle="Téléchargez vos Fichiers" data-modalurl="{{ path('app_'~access~'_file_upload',{'category': category, 'id': id,'type':'file','usage':usage,'folder':folder}) }}" title="Ajouter des fichiers">
                        <i class="fa fa-upload"></i>
                    </button>

                    <button type="button" class="btn btn-modal btn-primary"data-modalid="mymodalfull" data-modaltitle="Création Répertoire" data-modalurl="{{ path('app_'~access~'_file_folder',{'category': category, 'id': id,'usage':usage,'folder':folder}) }}" title="Ajouter un Répertoire">
                        <i class="fa fa-folder-plus"></i>
                    </button>
                </div>
            {% endif %}

            <div class="btn-group me-1" role="group" aria-label="Second group">
                {% if view=="small" %}
                    {%set action="list" %}
                {% else %}
                    {%set action="small" %}
                {% endif %}

                <a href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'type':'file','usage':usage,'folder':folder, 'view':action }) }}" type="button" class="btn btn-primary">

                {% if view=="small" %}
                    <i class="fas fa-list"></i>
                {% else %}
                    <i class="fas fa-th"></i>
                {% endif %}
                </a>
                
                {% set active="" %}
                {% if sort=="name" %}
                    {% set active="active" %}
                {%endif%}

                {% if order=="SORT_ASC" %}
                    {%set action="SORT_DESC" %}
                {% else %}
                    {%set action="SORT_ASC" %}
                {% endif %}

                <a href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'type':'file','usage':usage,'folder':folder, 'sort': 'name', 'order':action }) }}" type="button" class="btn btn-primary  {{active}}">

                {% if order=="SORT_ASC" %}
                    <i class="fas fa-long-arrow-alt-down"></i> Nom
                {% else %}
                    <i class="fas fa-long-arrow-alt-up"></i> Nom
                {% endif %}
                </a>


                {% set active="" %}
                {% if sort=="date" %}
                    {% set active="active" %}
                {%endif%}

                {% if order=="SORT_ASC" %}
                    {%set action="SORT_DESC" %}
                {% else %}
                    {%set action="SORT_ASC" %}
                {% endif %}
                <a href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'usage':usage,'folder':folder, 'sort': 'date', 'order':action }) }}" type="button" class="btn btn-primary  {{active}}">
                {% if order=="SORT_ASC" %}
                    <i class="fas fa-long-arrow-alt-down"></i> Date
                {% else %}
                    <i class="fas fa-long-arrow-alt-up"></i> Date
                {% endif %}
                </a>
            </div>

            {% if canadd %}
            <div class="btn-group" role="group" aria-label="Third group">
                {% if fgtrash %}
                <a href="{{ path('app_'~access~'_file_purgetrash',{'category': category, 'id': id ,'usage':usage}) }}" type="button" class="btn btn-primary" data-method="delete" data-confirm="Souhaitez-vous purger votre poubelle ? Cette action sera irrévocable.">Purger la poubelle</a>
                {% else %}
                <a href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'usage':usage,'folder':'file/'~category~'/'~id~'/.trash/' }) }}" type="button" class="btn btn-primary"><i class="fas fa-trash"></i></a>                
                {% endif %}
            </div>
            {% endif %}
        </div>


        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% for parent in parents %}
                    <li class="breadcrumb-item folder"  data-src="{{parent.folder}}"><a href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'usage':usage,'folder': parent.folder }) }}">{{ parent.basename}}</a></li>
                {% endfor %}
            </ol>
        </div>

        <div class="items-list">
            {% for dir in folders %}
                <div class="item item-{{view}} folder" data-src="{{dir.Prefix}}" style="background-color: var(--colorbgbodydark);">
                    <div class="item-container">
                        <div class="item-content">
                            <a class="item-link" href="{{ path('app_'~access~'_file_list',{'category': category, 'id': id,'usage':usage,'folder':dir.Prefix }) }}">
                                <img height="35" src="{{ dir.thumb }}">
                
                                <div class="item-title"> 
                                    <h3>{{ dir.basename }}</h3>
                                </div>
                            </a>

                            <div class="item-action">
                                {% if canadd %}
                                    {% if fgtrash %}
                                        <a style="display:none" onClick="restaureFile('{{dir.Prefix|e('js')|raw }}')">
                                            <i class="fa fa-undo" title="Restaurer le fichier"></i>
                                        </a>

                                        <a style="display:none" onClick="delFile('{{dir.Prefix|e('js')|raw }}')">
                                            <i class="fa fa-trash" title="Supprimer le dossier"></i>
                                        </a>
                                    {% else %}
                                        <a style="display:none" class="btn-modal" title="Modifier" data-modalid="mymodalfull" data-modaltitle="Modification" data-modalurl="{{ path('app_'~access~'_file_rename',{'category': category, 'id': id,'usage':usage,'file':dir.Prefix}) }}">
                                            <i class="fas fa-file"></i>
                                        </a>
                                        <a style="display:none"  onClick="trashFile('{{dir.Prefix|e('js')|raw}}')">
                                            <i class="fas fa-trash" title="Supprimer le dossier"></i>
                                        </a>
                                    {% endif %}
                                {% endif %}      
                            </div>  
                        </div>
                    </div>
                </div>
            {% endfor %}

            {% for file in files %}
                <div class="item item-{{view}} file" style="background-color: var(--colorbgbodydark);" data-src="{{file.Key}}">
                    <div class="item-container">
                        <div class="item-content">
                            <a class="item-link" href="{{ path('app_'~access~'_file_show',{'category': category, 'id': id,'file':file.Key }) }}" target="_blank">
                                <img height="35" src="{{ file.thumb }}">
                
                                <div class="item-title"> 
                                    <h3>{{ file.basename }}</h3>
                                    <div class="item-subtitle">le {{ file.LastModified|date("d/m/Y H:i")}}</div>
                                </div>
                            </a>

                            <div class="item-action">
                                {% if canadd %}
                                    {% if fgtrash %}
                                        <a style="display:none" onClick="restaureFile('{{file.Key|e('js')|raw }}')">
                                            <i class="fa fa-undo" title="Restaurer le fichier"></i>
                                        </a>

                                        <a style="display:none" onClick="delFile('{{file.Key|e('js')|raw }}')">
                                            <i class="fa fa-trash" title="Supprimer le dossier"></i>
                                        </a>
                                    {% else %}
                                        <a style="display:none" class="btn-modal" title="Modifier" data-modalid="mymodalfull" data-modaltitle="Modification" data-modalurl="{{ path('app_'~access~'_file_rename',{'category': category, 'id': id,'usage':usage,'file':file.Key}) }}">
                                            <i class="fas fa-file"></i>
                                        </a>
                                        <a style="display:none"  onClick="trashFile('{{file.Key|e('js')|raw}}')">
                                            <i class="fas fa-trash" title="Supprimer le dossier"></i>
                                        </a>
                                    {% endif %}
                                {% endif %}      
                            </div>  
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <div id="mymodalfull" class="modal" tabindex="-1">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe frameborder=0 width="100%" style="min-height:300px;"></iframe>
                </div>
            </div>
        </div>
    </div>    
{% endblock %}


{% block localscript %}
<script>
    $('#mymodalfull').on('shown.bs.modal', function() { 
        $("#framefile-{{id}}",window.parent.document).css("min-height",$("#mymodalfull").find("iframe").height()+130);
        $("#framefile-{{id}}",window.parent.document).parent().css("min-height",$("#mymodalfull").find("iframe").height()+130);
    });

    $('#mymodalfull').on('hide.bs.modal', function() { 
        $("#framefile-{{id}}",window.parent.document).css("min-height","unset");
        $("#framefile-{{id}}",window.parent.document).parent().css("min-height","unset");
    });

    $(window).on('load', function(){
        $("#framefile-{{id}}",window.parent.document).css("min-height","unset");
        $("#framefile-{{id}}",window.parent.document).parent().css("min-height","unset");
    });

    {% if canadd %}
        // Trasher un fichier 
        function trashFile(file) {
            var r = confirm("Confirmez-vous la mise à la poubelle de ce fichier ? Vous pourrez le récupèrer si besoin.");
            if (r == true) {  
                url="{{ path('app_'~access~'_file_trash',{'category': category, 'id': id,'file':'xxx' }) }}";
                url=url.replace("xxx",file);
                url=url.replace(/&amp;/g,"&");

                $.ajax({
                    method: "POST",
                    url: url,
                    success: function() {
                        location.reload();
                    }            
                });        
            }
        }
        // Supprimer un fichier 
        function delFile(file) {
            var r = confirm("Confirmez-vous la suppression définitive de ce fichier ?");
            if (r == true) {  
                url="{{ path('app_'~access~'_file_delete',{'category': category, 'id': id,'file':'xxx' }) }}";
                url=url.replace("xxx",file);
                url=url.replace(/&amp;/g,"&");

                $.ajax({
                    method: "POST",
                    url: url,
                    success: function() {
                        location.reload();
                    }            
                });        
            }
        }  

        // Restaurer un fichier 
        function restaureFile(file) {
            url="{{ path('app_'~access~'_file_restaure',{'category': category, 'id': id,'file':'xxx' }) }}";
            url=url.replace("xxx",file);
            url=url.replace(/&amp;/g,"&");

            $.ajax({
                method: "POST",
                url: url,
                success: function() {
                    location.reload();
                }            
            });        
        }      

        // Déplacement
        {% if not fgtrash %}
            $('.file').on('dragstart', function (s) {
                filesource=$(this).data("src");
            });    

            $('.folder').on('dragstart', function (s) {
                filesource=$(this).data("src");
            }); 

            $('.folder')
                // crucial for the 'drop' event to fire
                .on('dragover', false) 

                .on('drop', function (e) {
                    // Récupérer la destination
                    filedestination=$(this).data("src");

                    // Si la source est la meme que la destination on ne fait rien
                    if(filesource==filedestination) return false;
            
                    url="{{ path('app_'~access~'_file_move',{'category': category, 'id': id,'source':'xxx', 'destination':'zzz' }) }}";
                    url=url.replace("xxx",filesource);
                    url=url.replace("zzz",filedestination);
                    url=url.replace(/&amp;/g,"&");

                    // On déplace l'element
                    $.ajax({
                        method: "POST",
                        url: url,
                        success: function() {
                            location.reload();
                        }            
                    });  
                    return false;
            });
        {% endif %}
    {% endif %}
</script>
{% endblock %}