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

{% block body %}
    <div class="row">
        <div class="col-md-12" style="margin-bottom:15px">
            <a onclick="window.parent.$('#mymodallarge').modal('hide');" class="btn btn-secondary">Fermer</a>
            <a href="{{ path('app_'~access~'_icon',{'inframe':true}) }}" class="btn btn-secondary">Gérer les Icônes</a>
        </div>  

        <div class="col-md-12">
            <label class="control-label" for="group_label">Recherche</label>
            <input type="text" id="icon_search" name="icon_search" class="form-control form-control" style="margin-bottom:15px">

            {% if iconsuser is not empty %}
                <h3>Mes Icônes</h3>
                {% for icon in iconsuser %}
                    {% set tag = "" %}
                    {% if icon.tags %}
                        {% set tag = icon.tags %}
                    {% endif %}
                    {% if icon.label starts with 'icon/icon_' %}
                        {% set tag = tag ~ icon.label|replace({'icon/icon_':'', '.png':''}) %}
                    {% endif %}

                    <img onClick="window.parent.selIcon({{ icon.id }},'{{ path('app_minio_image',{file:icon.label}) }}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="{{ path('app_minio_image',{file:icon.label}) }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: var(--colorbgbodydark">
                {% endfor %}                  

                <h3 class="mt-3">Icônes Communs</h3>
            {% endif %}
            {% for icon in icons %}
                {% set tag = "" %}
                {% if icon.tags %}
                    {% set tag = icon.tags %}
                {% endif %}
                {% if icon.label starts with 'icon/icon_' %}
                    {% set tag = tag ~ icon.label|replace({'icon/icon_':'', '.png':''}) %}
                {% endif %}
                <img onClick="window.parent.selIcon({{ icon.id }},'{{ path('app_minio_image',{file:icon.label}) }}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="{{ path('app_minio_image',{file:icon.label}) }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: var(--colorbgbodydark">
            {% endfor %}                  
        </div>
    </div>
{% endblock %}

{% block localscript %}
<script>
    $('document').ready(function(){
        $( "#icon_search" ).focus();
    });

    $( "#icon_search" ).on("keyup", function() {
        if($( "#icon_search" ).val()=="")
            $(".grid-item-img").show();
        else {
            tags=$( "#icon_search" ).val().toLowerCase().split(' ');
            
            $(".grid-item-img").hide();
            tags.forEach(function(tag){
                $(".grid-item-img").each(function(index) {
                    icontags=$( this ).attr("data");
                    if (typeof icontags !== 'undefined') {
                        if(icontags.includes(tag)) $(this).show();
                    }
                });
            });
        }
    });
</script>
{% endblock %}