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

{% block localstyle %}
    #page-wrapper {
        padding: 0px 5px 0px 5px;
    }
{% endblock %}

{% block pagewrapper %}
    <div>
        <a onclick="window.parent.$('#mymodal').modal('hide');" class="btn btn-secondary">Fermer</a>
        {% if access=="user" %}
            <a href="{{ path('app_portal_user_icon',{'inframe':true}) }}" class="btn btn-secondary">Gérer mes Icônes</a>
        {% else %}
            <a href="{{ path('app_portal_config_icon',{'inframe':true}) }}" class="btn btn-secondary">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="{{ asset(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="{{ asset(icon.label) }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: #{{ color["main"]}}">
        {% endfor %}                  
    </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 %}


