{% extends 'main_card.html.twig' %}

{% block card_title %}<i class="fas fa-camera-retro fa-fw"></i> {% trans %}label_scanner.title{% endtrans %}{% endblock %}

{% block card_content %}
    <div class="alert alert-warning d-none" id="scanner-warning">
        <strong>{% trans %}label_scanner.no_cam_found.title{% endtrans %}</strong>: {% trans %}label_scanner.no_cam_found.text{% endtrans %}
    </div>

    <div class="">
        <div class="form-group row">
            <div class="offset-sm-3 col-sm-9">

                <div class="img-thumbnail" style="max-width: 600px;">
                    <div id="reader-box" {{ stimulus_controller('pages/barcode_scan') }}></div>
                </div>
            </div>
        </div>

    </div>

    {{ form_start(form, {'attr': {'id': 'scan_dialog_form'}}) }}

    {{ form_end(form) }}


    {% if infoModeData %}
        <hr>
        <h4>{% trans %}label_scanner.decoded_info.title{% endtrans %}</h4>

        <table class="table table-striped table-hover table-bordered table-sm">
            <tbody>
            {% for key, value in infoModeData %}
                <tr>
                    <td>{{ key }}</td>
                    <td><code>{{ value }}</code></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

    {% endif %}

{% endblock %}