{% extends "base.html" %}

{% load static %}

{% block title %}Сканирование штрих-кода{% endblock %}

{% block content %}
<div class="container my-4">
    <div id="scanner-container" class="card mx-auto shadow-sm" style="max-width: 640px;">
        <div class="card-header bg-primary text-white text-center">
            <h1 class="h5 mb-0">Сканирование штрих-кода</h1>
        </div>
        <div class="card-body">
            <div id="video-preview" class="border rounded bg-dark text-white mb-3" style="position: relative; width: 100%; height: 360px; overflow: hidden;">
                <video id="camera-stream" autoplay style="width: 100%; height: 100%; object-fit: cover;"></video>
            </div>
            <p id="result" class="text-center mb-4">Результат: <span id="barcode-result" class="fw-bold text-success">---</span></p>
            <div id="product-details" class="product-info mt-3" style="display:none;">
                <h2 class="h6">Информация о товаре</h2>
                <ul id="product-info-list" class="list-group"></ul>
            </div>
            <div class="text-center">
                <button id="stop-button" class="btn btn-danger mt-3" style="display:none;">Остановить сканирование</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/scan_barcode.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
{% endblock %}