{% extends 'user/form.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block form_body %}
    <div class="card-body{% if auth is not empty %} p-0{% endif %}">

        {% if auth is empty %}
            {{ widgets.callout('info', 'User has no codes configured for using the Kiosk mode') }}
        {% else %}
            {% set unknown = [] %}
            <table class="table">
                <thead>
                    <tr>
                        <th class="w-25">{{ 'kiosk.barcode_type'|trans }}</th>
                        <th>{{ 'Code'|trans }}</th>
                        <th>{{ 'active'|trans }}</th>
                        <th class="actions w-min">{{ 'actions'|trans }}</th>
                    </tr>
                </thead>
                <tbody>
            {% for userAuth in auth %}
                {% if userAuth.type not in encoders|keys %}
                    {% set unknown = unknown|merge([userAuth.type]) %}
                {% else %}
                    {% set encoder = encoders[userAuth.type] %}
                    {% set type = encoder.encoder %}
                    {% set name = encoder.title %}
                    <tr>
                        <td>
                            {{ name }}
                        </td>
                        <td>
                            {% if encoder.barcode %}
                                <canvas onclick="printImage('barcode_{{ userAuth.id }}')" id="barcode_{{ userAuth.id }}" style="max-width: 100%" data-code="{{ userAuth.code }}" data-type="{{ type }}"></canvas>
                                <div id="kioskError" style="display: none">
                                    {{ widgets.callout('danger', 'kiosk.barcode.error'|trans({'%code%': userAuth.code}), 'kiosk.error'|trans) }}
                                </div>
                                <p>{{ userAuth.code }}</p>
                            {% else %}
                                <p>
                                <strong>{{ userAuth.code }}</strong>
                                </p>
                            {% endif %}
                            {% if userAuth.activity is not null %}
                            <p>
                                <strong>{{ 'activity'|trans }}</strong>:
                                {{ widgets.label_activity(userAuth.activity) }} &gt;
                                {{ widgets.label_project(userAuth.activity.project) }} &gt;
                                {{ widgets.label_customer(userAuth.activity.project.customer) }}
                            </p>
                            {% endif %}
                        </td>
                        <td>
                            {{ widgets.label_boolean(type in enabled) }}
                        </td>
                        <td class="w-min">
                            <a class="btn btn-primary btn-icon modal-ajax-form" href="{{ path('user_barcode_edit', {'username': user.username, 'userAuth': userAuth.id}) }}">{{ icon('edit') }}</a>
                            <a class="btn btn-danger btn-icon confirmation-link pull-right" data-question="{{ 'confirm.delete'|trans }}" href="{{ path('user_barcode_delete', {'username': user.username, 'userAuth': userAuth.id}) }}">{{ icon('trash') }}</a>
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
                </tbody>
            </table>

            {% if unknown is not empty %}
                {{ widgets.callout('warning', 'Unknown encoder: ' ~ unknown|join(', ')) }}
            {% endif %}
        {% endif %}
    </div>

    <div class="card-footer">
        {% for type in enabled %}
            <a class="btn btn-success" href="{{ path('user_barcode_create', {'username': user.username, 'type': type}) }}">{{ 'create'|trans }}: {{ encoders[type].title }}</a>
        {% endfor %}
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/kiosk/bwip-js-min.js') }}"></script>
    <script type="text/javascript">
        document.addEventListener('kimai.initialized', function() {
            KimaiReloadPageWidget.create('kimai.barcodeUpdate', true);
        });

        function printImage(selector) {
            const imgUrl = document.getElementById(selector).toDataURL("image/png");
            const win = window.open(imgUrl);
            win.document.write('<html><body style="background-color:#fff"><img src="' + imgUrl + '"/></body></html>');
        }

        function renderBarcode(selector) {
            var canvas = document.getElementById(selector);
            var code = canvas.getAttribute('data-code');
            var type = canvas.getAttribute('data-type');

            try {
                bwipjs.toCanvas(selector, {
                    bcid: type,
                    text: code,
                    scale: 2,
                    height: 10,
                    includetext: {% if includeText %}true{% else %}false{% endif %},
                    textxalign: 'center'
                });
            } catch (e) {
                document.getElementById(selector).style.display = 'none';
                document.getElementById('kioskError').style.display = 'block';
            }
        }

        {% for userAuth in auth %}
            {% if userAuth.type in encoders|keys %}
                {% set encoder = encoders[userAuth.type] %}
                {% if encoder.barcode %}
                    renderBarcode('barcode_{{ userAuth.id }}');
                {% endif %}
            {% endif %}
        {% endfor %}
    </script>
{% endblock %}