{% extends 'Application/' ~ settings.get("theme") ~'/base.html.twig' %}

{% block title %}{{'Boutique VIP'|trans}}{% endblock %}

{% block body %}
<h1>{{'Boutique VIP'|trans}}</h1>

<section class="p-3">
<div id="shop" class="row">
<form method="get" action="{{ path('shop.index') }}" class="mb-4">
    <label for="category" class="form-label">{{ 'Filtrer par catégorie'|trans }}</label>
    <select name="category" id="category" class="form-select" onchange="this.form.submit()">
        <option value="">{{ 'Toutes les catégories'|trans }}</option>
        {% for folder in folders %}
            <option value="{{ folder }}" {% if selectedFolder == folder %}selected{% endif %}>
                {{ folder }}
            </option>
        {% endfor %}
    </select>
</form>
   {% for item in shop %}
        {% if item.image is not null %}
        <div class="col-md-6">
            
		
			<article class="card rounded-0 border shadow">
                <img src="{{asset('assets/general/items/'~ item.image)|imagine_filter('general')}}"
                    class="card-img-top rounded-0"
                    alt="{{item.name}} | Hôtel des ventes - {{settings.get('game_title')}} | {{settings.get('seo_description')}}">

                <div class="card-header p-0 rounded-0">
                    <h2>
                        {{item.name}} {% if item.quantity > 1 %} (x{{item.quantity}}) {% endif %}
                        {% if (item.promotion > 0) %} <span class="text-danger">-{{ item.promotion }}%</span>{% endif %}
                    </h2>
                </div>

                <div class="card-body">
                    {{item.description|striptags|raw}}
                </div>

                <div class="card-footer border-0">
                    <div class="row">
                        <div class="col-10">
                            <strong>{{item.price}} {{"credits"|trans}}</strong>
                        </div>
                        <div class="col-2">
                            {% if app.user %}
                            <a href="{{path('shop.detail', {'id':item.id})}}">
                                <img src="{{asset('assets/themes/' ~ settings.get("theme") ~ '/img/i_basket.png')}}" width="25px">
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </article>
			

        </div>
        {% endif %}

        {% if item.image is null %}
        <div class="col-md-6">
		<div id="box-shop">
            <div id="box-inside">
                <div class="header" style="height: 60px;">
                    <img src="{{asset('assets/general/gamedata/items/' ~ item.itemData.Icon )}}"
                        style="width: 50px;height: 50px;margin: 5px 10px 0px 5px;float: left;" loading="lazy"
                        alt="{{item.itemData.Name}} | Hôtel des ventes - {{settings.get('game_title')}} | {{settings.get('seo_description')}}">

                    <span class="title-card">
					<style>
.blink {
  animation: blink-animation 1s steps(2, start) infinite;
  color: red;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>
                        {{item.itemData.Name}} {% if item.quantity > 1 %} (x{{item.quantity}}) {% endif %}
                        {% if (item.promotion > 0) %} <span class="blink">-{{ item.promotion }}%</span>{% endif %}
                    </span>

                </div>
                <p>
                    {{ (item.description|striptags) > 150 ? ((item.description|striptags|slice(0, 150)) ~
                    '...')|raw :
                    (item.description|striptags|raw) }}
                </p>
				   <div id="boxpromotionshop">
				   {% if (item.promotion > 0) %} Save<span class="text-danger"> -{{ item.promotion }}%</span> on this item
				       {% else %}
        <span>No promotion AVAILABLE</span>
    {% endif %}
                    
                </div>
                <div id="boxfootershop">
                    <strong>{{item.price}} Magic Coins</strong>
                    {% if app.user %}
					
                    <a href="{{path('shop.detail', {'id':item.id})}}">
                        <img src="{{asset('assets/themes/' ~ settings.get("theme") ~ '/img/addto.png')}}" width="25px">
                    </a>
                    {% endif %}
                </div>
         </div>
        </div>
		</div>
        {% endif %}
        {% endfor %}

        <div class="p-3 text-center">
            <a href="{{path('shop.index')}}" class="customBTN  w-100 mb-4">
                {{"Tout afficher"|trans}}
            </a>
        </div>

        <div class="clear"></div>

</div>
</section>
{% endblock %}