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

{% block title %}{{"Accueil"|trans}}{% endblock %}

{% block body %}

<h1 class="mb-3">
    {{ 'Actualités'|trans }}
</h1>

<section class="bg-white p-3">
    <div id="news" class="mb-3">
        {% for news in news %}
        <article class="border shadow">
            {% if news.category is not null %}
            <div class="category_tag" style="background: rgb({{news.category.color|categoryColor}});"><span class="p-3">{{news.category.name}}</span></div>
            {% endif %}
            <div class="header"
                style="background-image:url('{{asset('assets/general/news/'~ news.imgUrl)|imagine_filter('general')}}');">
                <h2>
                    <img src="{{asset('assets/themes/' ~ settings.get("theme") ~ '/img/i_news.png')}}" alt="Icône des articles"
                        loading="lazy">
                    {{news.title}}
                </h2>
            </div>
            <div class="footer">
                {{ 'Publié le'|trans }} <strong>{{ news.date|date('d/m/Y') }}</strong> {{ 'par'|trans }} <strong>{{
                    news.author
                    }}</strong>.
                <a href="{{path('news.read', {'id':news.id, 'slug':news.slug})}}">
                    <img src="{{asset('assets/themes/' ~ settings.get("theme") ~ '/img/i_bulle.png')}}" alt="Icône bulle lire la suite"
                        loading="lazy"> {{ 'Lire la suite'|trans }}
                </a>
            </div>
        </article>
        {% endfor %}
    </div>

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

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

    <h1 class="mb-3">
        {{ 'Boutique'|trans }}
    </h1>

    <div id="shop" class="row">

        {% 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">
            <article class="shop w-100">
                <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">
                        {{item.itemData.Name}} {% if item.quantity > 1 %} (x{{item.quantity}}) {% endif %}
                        {% if (item.promotion > 0) %} <span class="text-danger">-{{ item.promotion }}%</span>{% endif %}
                    </span>

                </div>
                <p>
                    {{ (item.description|striptags) > 150 ? ((item.description|striptags|slice(0, 150)) ~
                    '...')|raw :
                    (item.description|striptags|raw) }}
                </p>
                <div class="footer">
                    <strong>{{item.price}} {{"credits"|trans}}</strong>
                    {% 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>
            </article>
        </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 %}