{% extends 'generic/object_create.html' %}
{% load form_helpers %}
{% load static %}

{% block javascript %}
    {{ block.super }}
    <script src="{% static 'nautobot_cable_utils/html5-qrcode.min.js' %}"></script>
    <script src="{% static 'nautobot_cable_utils/qr-scanner.js' %}"></script>
{% endblock javascript %}

{% block title %}Commission Cable{% endblock title %}

{% block form %}
    {% include 'nautobot_cable_utils/inc/cable_ends.html' %}
    <div class="card">
        <div class="card-header"><strong>Commission Cable #{{ cable.pk }}</strong></div>
        <div class="card-body">
            {% render_field form.cable_number %}
            {{ form.cable }}
            <div class="d-flex gap-2 mt-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleQrcodeReader();">
                    <span class="mdi mdi-qrcode-scan" aria-hidden="true"></span> Scan
                </button>
                <button type="button" id="toggle-flash" class="btn btn-sm btn-outline-secondary" style="visibility: hidden;" onclick="toggleTorch();">
                    <span class="mdi mdi-flashlight" aria-hidden="true"></span> Toggle Light
                </button>
            </div>
        </div>
        <div id="qr-reader"></div>
    </div>
{% endblock form %}

{% block buttons %}
    <button type="submit" name="_create" class="btn btn-primary">Create</button>
    <a href="{{ return_url }}" class="btn btn-secondary">Cancel</a>
{% endblock buttons %}