{% extends 'base.html' %}
{% load form_helpers %}
{% load static %}

{% block title %}Bulk Commission Cables - left: {{ count }}{% endblock title %}

{% block content %}
    <div class="row">
        <div class="col-lg-6">
            {% include 'nautobot_cable_utils/inc/cable_ends.html' with cable=object %}
        </div>
        <div class="col-lg-6">
            <form method="post" class="form form-horizontal">
                {% csrf_token %}
                {# The cable this page shows; a page that is out of date is recognised by it. #}
                <input type="hidden" name="cable_id" value="{{ object.pk }}">
                <div class="card">
                    <div class="card-header"><strong>Commission Cable #{{ object.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>

                <button type="submit" name="_create" class="btn btn-primary">Create</button>
                <button type="submit" name="_skip" class="btn btn-secondary">Skip</button>
                <button type="submit" name="_cancel" class="btn btn-secondary">Cancel</button>
            </form>
        </div>
    </div>
{% endblock content %}

{% 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 %}