{% 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 id="scan-augmented-result" class="mt-3">
            {% include "label_system/scanner/_info_mode.html.twig" %}
        </div>

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

        {{ form_end(form) }}
    </div>
{% endblock %}

{% block scan_results %}
    <turbo-stream action="replace" action="morph" target="scan-augmented-result">
        <template>
            <div id="scan-augmented-result" class="mt-3">
                {% include "label_system/scanner/_info_mode.html.twig" %}
            </div>
        </template>
    </turbo-stream>
{% endblock %}