{% extends 'Base/base.html' %}
{% block body %}
        <div class="page-content">
            {% if message %}
            <div class="notification-container" data-type="{{message.type}}">
                <div class="notification-title">{% if message.type == 'error' %}Oeps!{% elseif message.type == 'success' %}Jeuj!{% else %}Info!{% endif %}</div>
                <div class="notification-content">{{message.body}}</div>
            </div><br><br>
            {% endif %}

            <div class="left-side">
                <h2>Boutique</h2>

                <div class="tabs-container">
                    {% if data.type == 'jetons' %}
                    <span class="tab selected">Jetons</span>
                    {% else %}
                    <a href="{{path}}/store/jetons/category" class="tab">Jetons</a>
                    {% endif %}
                   
                    {% if data.type == 'badges' %}
                    <span class="tab selected">Badges</span>
                    {% else %}
                    <a href="{{path}}/store/badges/category" class="tab">Badges</a>
                    {% endif %}
                </div>

                <div class="scroll-content">
                    {% if data.type == 'jetons' %}
                    <article class="default-section">
                        <h3 class="aside-title">Boutique</h3>
                        <script src="//api.dedipass.com/v1/pay.js"></script>
                        <div data-dedipass="d0e4ccd12851031a68bf1d1683cfc40a" data-dedipass-custom="{{player.id}}"></div>
                    </article>
                    {% endif %}

                    {% if data.type == 'badges' %}
                    {% for row in data.badges %}
                    <article class="default-section store-item flex-container flex-vertical-center">
                        <div class="store-description">
                            <h4>{{row.title}}</h4>

                            <img src="https://images.habbix.me/c_images/album1584/{{row.badge}}.gif">
                        </div>

                        <div class="store-offer">
                            <a href="{{path}}/store/badges/buy/{{row.id}}" class="rounded-button blue plain">Acheter</a>
                            <p class="store-price"><strong>{{row.amount}}</strong> jetons</p>
                        </div>
                    </article>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>

            {% if data.type == 'jetons' %}
            <div class="right-side">
                <h2>Que sont les appels de jetons ?</h2>
                <aside class="default-section">
                    <p>Vous pouvez acheter des jetons grâce aux moyens de paiements disponibles.</p>
                    <p>Ceux-ci peuvent ensuite servir sur l'hôtel ou dans la boutique afin d'acheter différents avantages comme le VIP ou autre.</p>
                    <hr>
                    <p><b>Mon nombre de jetons :</b> <font style="float:right;font-weight:600;color:#666;">{% if player is not null %}{{player.belcredits}}{% else %}<a href="{{path}}">Se Connecter</a>{% endif %}</font></p>
                </aside>
            </div>
            {% endif %}

            {% if data.type == 'badges' %}
            <div class="right-side">
                <h2>Que sont les badges?</h2>
                <aside class="default-section">
                    Sur Habbix vous avez des centaines, voire des milliers de badges. Vous pouvez le voir en cliquant sur un Habbix ou en consultant son profil. Vous pouvez également gagner des badges en participant à des compétitions ou à des événements.
                    <hr>
                    <p><b>Mon nombre de jetons :</b> <font style="float:right;font-weight:600;color:#666;">{% if player.belcredits %}{{player.belcredits}}{% else %}0{% endif %}</font></p>
                </aside>
            </div>
            {% endif %}
        </div>
{% endblock %}