{% extends '@CadolesCore/base.html.twig' %}

{% block pagewrapper %}
    <div class="row">
        

        <div class="col-md-12" style="margin-bottom:15px">
            <a onclick="window.parent.$('#mymodal').modal('hide');" class="btn btn-default">Fermer</a>
            {% if access=="user" %}
                <a href="{{ path('cadoles_portal_user_icon',{'inframe':true}) }}" class="btn btn-default">Gérer mes Icônes</a>
            {% else %}
                <a href="{{ path('cadoles_portal_config_icon',{'inframe':true}) }}" class="btn btn-default">Gérer les Icônes</a>
            {% endif %}
        </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 'uploads/icon/icon_' %}
                        {% set tag = tag ~ icon.label|replace({'uploads/icon/icon_':'', '.png':''}) %}
                    {% endif %}

                    <img onClick="window.parent.selIcon({{ icon.id }},'{{icon.label}}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="/{{ alias }}/{{ icon.label }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
                {% endfor %}                  

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

{% block localjavascript %}
    $('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();
                    }
                });
            });
        }
    });
{% endblock %}


