{% set widgetname="item" %}
{% extends 'Pagewidget/widget.twig' %}

{% block widgetaction %}
    {% if canadd %}
    <i class="fas fa-text-height" title="Changer taille des items" onClick="changeWidget({{ entity.id }},'modedesktop',{{modedesktop}})"></i>
    {% endif %}
{% endblock %}            

{% block widgetbody %}
    {% set havemenu=false %}
    {% set havebookmark=false %}

    {% if menu and withbookmark!= 2 and (canadd or bookmarks is not empty or itemcategorys|length > 1) %}
        {% set havemenu=true %}
        <div style="margin-bottom: 5px;">
        {% if menuall %}
            <div class="cat-list" onClick="showItemCat({{ entity.id}},'all')">Tout</div>
        {% endif %}

        {% if bookmarks is not empty or canadd %}
            <div class="cat-list" onClick="showItemCat({{ entity.id}},'bookmark')"><i class="fa fa-heart"></i></div>
        {% endif %}

        {% for itemcategory in itemcategorys %}
            <div class="cat-list" onClick="showItemCat({{ entity.id}},{{itemcategory.id}})">{{itemcategory.label}}</div>               
        {% endfor %}                    
        </div>
    {% endif %}

    {% if search %}
        {% set havemenu=true %}
        <div class="input-group" style="margin-bottom: 5px;">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-search"></i>&nbsp;</span>
            </div>
            <input id="itemsearch" onKeyup="searchItem({{ entity.id}},$(this).val());" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        </div>
    {% endif %}

    {% if (bookmarks is not empty or canadd ) and (withbookmark==0 or withbookmark==2) %}
        {% if withbookmark==0 or  itemcategorys|length > 1 %}
        <h3 class="itemcategory-title {{not havemenu ? "mt-1" : "mt-3"}} mb-0" style="{{ entity.colorbodyfont ? "color:"~entity.colorbodyfont~";" : "color:var(--colorfttitlelight);"}}" data-idcategory="bookmark">Favoris</h3>
        {% endif %}
        <div class="items-list">
            {% for bookmark in bookmarks %}
                {% set havebookmark=true %}
                {% if bookmark.item %}
                    {% set bookmarktitle = bookmark.item.title %}
                    {% set bookmarksubtitle = bookmark.item.subtitle %}
                    {% set bookmarkbackgroundcolor = bookmark.item.color ? bookmark.item.color : app.session.get('colorbgbodydark')|raw %}
                    {% set bookmarktarget = bookmark.item.target %}
                    {% set bookmarkurl = ( bookmark.item.protected and not app.user ? path("app_login") : bookmark.item.url|replace({'#login#': username}) ) %}
                    {% set bookmarkcontent = bookmark.item.content %}
                    {% set bookmarkicon = (bookmark.item.icon ? bookmark.item.icon.label : "icon/icon_pin.png") %}
                {% else %}
                    {% set bookmarktitle = bookmark.title %}
                    {% set bookmarksubtitle = bookmark.subtitle %}
                    {% set bookmarkbackgroundcolor = bookmark.color ? bookmark.color : app.session.get('colorbgbodydark')|raw %}
                    {% set bookmarktarget = bookmark.target %}
                    {% set bookmarkurl = bookmark.url|replace({'#login#': username}) %}
                    {% set bookmarkcontent = null %}
                    {% set bookmarkicon = bookmark.icon ? bookmark.icon.label : "icon/icon_pin.png" %}
                {% endif %}

                <div class="item {{itemsize}}" style="background-color: {{ bookmarkbackgroundcolor }};" data-idcategory="bookmark" data-title="{{bookmarktitle|lower}}">
                    <div class="item-container">
                        <div class="item-content">
                            {% if bookmarktarget == 'frame' %}
                            <a class="item-link" onClick="showItemframe('bookmark{{ bookmark.id }}','{{ bookmarkurl }}')">
                            {% else %}
                            <a class="item-link" href="{{ bookmarkurl }}" target="{{bookmarktarget }}">
                            {% endif %}
                                <img height="35" src="{{ path('app_minio_image',{file:bookmarkicon}) }}">
                
                                <div class="item-title"> 
                                    <h3 >{{ bookmarktitle }}</h3>  
                                    <div class="item-subtitle">{{ bookmarksubtitle|nl2br }}</div>
                                </div>
                            </a>

                            <div class="item-action">
                                    {% if canadd %}
                                        {% if bookmark.item %}
                                            <a style="display:none" onClick="delBookmark({{ bookmark.id }},{{ entity.id }},true)"><i class="item-heart fas fa-heart-crack"></i></a>
                                        {% else %}
                                            <a style="display:none" onClick="modBookmark({{ bookmark.id }},{{ entity.id }},true)"><i class="item-mod fas fa-file"></i></a>
                                            <a style="display:none" onClick="delBookmark({{ bookmark.id }},{{ entity.id }},true)"><i class="item-trash fas fa-trash"></i></a>
                                        {% endif %}
                                    {% endif %}      

                                {% if bookmarkcontent %}
                                    <a style="display:none"><i class="item-info fas fa-circle-info"></i></a>
                                {% endif %}
                            </div>  
                        </div>

                        <div class="item-description hide">{{ bookmarkcontent|raw }}</div>
                    </div>
                </div>
            {% endfor %}

            {% if (canadd) %}
                <div class="item {{ itemsize }}" style="background-color: var(--colorbgbodydark);" data-idcategory="bookmark">
                    <div class="item-container">
                        <div class="item-content">
                            <a class="item-link" onClick="addBookmark({{ entity.id }},true)">
                                <img height="35" src="{{ path('app_minio_image',{file:"icon/icon_add.png"}) }}">
                                <div class="item-title"> 
                                    <h3 >Ajouter</h3>  
                                    <div class="item-subtitle">Ajouter un Favoris</div>
                                </div>                                    
                            </a>
                            <div class="item-action">
                            </div>
                        </div>
                    </div>
                </div>                    
            {% endif %}
        </div>
    {% endif %}

    {% for itemcategory in itemcategorys %}
        {% if itemcategorys|length > 1 or havebookmark or canadd %} <h3 class="itemcategory-title {{loop.first and not havemenu and not havebookmark ? "mt-1" : "mt-3"}} mb-0" style="{{ entity.colorbodyfont ? "color:"~entity.colorbodyfont~";" : "color:var(--colorfttitlelight);"}}" data-idcategory="{{itemcategory.id}}">{{itemcategory.label}}</h3> {% endif %}
        <div class="items-list">
            {% for item in items %}
                {% if item.itemcategory==itemcategory %}
                    <div class="item {{itemsize}}" style="background-color: {{ item.color ? item.color : "var(--colorbgbodydark)" }};" data-idcategory="{{item.itemcategory.id}}" data-title="{{item.title|lower}}">
                        <div class="item-container">
                            <div class="item-content">
                                {% set url=item.url|replace({'#login#': username}) %}
                                {% if item.protected and not app.user %}
                                    {% set url=path('app_login') %}
                                {% endif %}
                                
                                {% if item.target == 'frame' %}
                                <a class="item-link" onClick="showItemframe({{ item.id }},'{{ url }}')">
                                {% else %}
                                <a class="item-link" href="{{ url }}" target="{{ item.target }}">
                                {% endif %}

                                    {% if item.icon %}
                                        <img height="35" src="{{ path('app_minio_image',{file:item.icon.label}) }}">
                                    {% else %}
                                        <img height="35" src="{{ path('app_minio_image',{file:"icon/icon_pin.png"}) }}">
                                    {% endif %}                                             
                    
                                    <div class="item-title"> 
                                        <h3 >{{ item.title }}</h3>  
                                        <div class="item-subtitle">{{ item.subtitle|nl2br }}</div>
                                    </div>
                                </a>

                                <div class="item-action">
                                    {% if canadd %}
                                    <a style="display:none" onClick="heartBookmark({{ item.id }})"><i class="item-heart fa fa-heart"></i></a>
                                    {% endif %}          

                                    {% if item.content %}
                                        <a style="display:none"><i class="item-info fas fa-circle-info"></i></a>
                                    {% endif %}
                                </div>  
                            </div>

                            <div class="item-description hide">{{ item.content|raw }}</div>
                        </div>
                    </div>
                {% endif %}             
            {% endfor %}
        </div>
    {% endfor %}
{% endblock %}