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

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

{% block component_body %}
    <div class="card card-flush p-9">
            {% if qrcode is not null %}
                <div class="row">
                    <div class="col-lg-4">
                        {{ form_start(form, {'attr': {'id': '_form'}}) }}
                            {{ form.menuPreview|form_checkbox_row }}
                        {{form_end(form)}}
                    </div>
                    <div class="col-lg-8 d-flex flex-column flex-center">
                        <a href="{{qrcode.url}}" class="badge badge-light-primary fs-6 p-3 dematerialized-menu-preview" target="_blank" style="display:none">
                            {{ qrcode.url }}
                        </a>
                        <div class="dematerialized-menu-preview m-3" style="display:none">
                            <img class="mh-sm-300px" src="{{ qrcode.uri }}" id="qrcode-dematerialized-img" />
                        </div>
                        <div class="dematerialized-menu-preview" style="display:none">
                            {{ link('download', '', 'light-primary', {'image' : qrcode.image, 'name': 'menu-preview' }) }}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="d-flex flex-column flex-center pt-5">
                    <span style="color:orange">{{ 'app.global.fields.domain_not_exist'|trans }}</span>
                </div>
            {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        var shop = {{ shop.id }};
    </script>
    <script src="{{asset('foxorders/js/shop/qrcode/dematerialized-card.js') }}"></script>
{% endblock %}