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

{% block title %}
    {{ 'app.shop_owner.pages.qrcodes.title'|trans }}
{% endblock %}

{% block component_body %}
    <div class="col-xl-12">
        <div class="card  mb-xl-9">
            <div class="card-header border-0">
                <div class="card-title m-0">
                    <h3>{{ 'app.shop_owner.pages.qrcodes.title'|trans }}</h3>
                </div>
            </div>
        </div>
        {% if domain %}
            <div class="row g-6 mb-6 g-xl-9 mb-xl-9">
                {% for qrcode in qrcodes %}
                    <div class="col-md-6 col-xxl-4">
                        <div class="card">
                            <div class="card-body d-flex flex-center flex-column p-9">
                                <div class="fw-bold text-gray-400 mb-6">{{ qrcode.name  }}</div>
                                <div class="mb-5 qrcodeurl">
                                    <div class="qrcode" style="text-align: center">
                                        <a class="d-block overlay mb-5" data-fslightbox="lightbox-basic" href="{{ qrcode.uri }}">
                                            <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-200px min-w-sm-175px"
                                                style="background-image:url('{{ qrcode.uri }}')">
                                            </div>
                                            <div class="overlay-layer card-rounded bg-dark bg-opacity-25 shadow">
                                                <i class="bi bi-eye-fill text-white fs-3x"></i>
                                            </div>
                                        </a>
                                        {{ link('download', '', 'light-primary', {'image' : qrcode.image, 'name': qrcode.name }) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="card py-4">
                <div class="card-body d-flex flex-column pt-12 p-9">
                    <span style="color:orange">{{ 'app.global.fields.domain_not_exist'|trans }}</span>
                </div>
            </div>
        {% endif %}
    </div>

    {% for mode, stickers in images %}
        <div class="card card mb-10">
            <div class="card-header">
                <div class="card-title">
                    <h2>{{ mode|to_sentence() }}</h2>
                </div>
            </div>
            <div class="card-body py-3 flex">
                <div class="row">
                    <div class="tns tns-default" style="direction: ltr">
                        <div
                            data-tns="true"
                            data-tns-loop="true"
                            data-tns-swipe-angle="true"
                            data-tns-speed="1000"
                            data-tns-autoplay="true"
                            data-tns-autoplay-timeout="18000"
                            data-tns-controls="true"
                            data-tns-nav="true"
                            data-tns-items="3"
                            data-tns-center="false"
                            data-tns-dots="true"
                            data-tns-prev-button="#kt_team_slider_prev1"
                            data-tns-next-button="#kt_team_slider_next1">
                            {% for sticker in stickers %}
                                <div class="text-center symbol symbol-200px  px-5 py-5">
                                    <a class="d-block overlay" data-fslightbox="lightbox-basic" href="{{ asset('assets/media/qrcodes/' ~ mode ~ "/" ~ sticker) }}">
                                        <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px"
                                            style="background-image:url('{{ asset('assets/media/qrcodes/' ~ mode ~ "/" ~ sticker) }}')">
                                        </div>
                                        <div class="overlay-layer card-rounded bg-dark bg-opacity-25 shadow">
                                            <i class="bi bi-eye-fill text-white fs-3x"></i>
                                        </div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                        <button class="btn btn-icon btn-active-color-primary" id="kt_team_slider_prev1">
                            <span class="svg-icon svg-icon-3x">
                            </span>
                        </button>
                        <button class="btn btn-icon btn-active-color-primary" id="kt_team_slider_next1">
                            <span class="svg-icon svg-icon-3x">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}
{% block javascripts %}
	<script src="{{ asset('foxorders/js/shop/qrcode/qrcode.js' )}}"></script>
    <script src="{{ asset('assets/plugins/custom/fslightbox/fslightbox.bundle.js') }}"></script>
{% endblock %}