{% extends "base/base.html" %}
{% load staticfiles %}

{% block title %} Production {% endblock title %}

{% block stylesheets %}
    {{ block.super}}
{% endblock %}

{% block content %}
    <div class="container tile_count" style="">
		<div class="col-sm-4" style="">

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        Device list
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="max-height: 300px;overflow-y: scroll">
                    <div id="treeview" style="font-size: 10px">

                    </div>
                </div>
            </div>

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        Filter
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    <ul class="nav nav-tabs" id="DeviceInformationTabs">
                        <li class="active"><a data-toggle="tab" href="#filter_menu1">
                            Input
                        </a></li>
                        <li><a data-toggle="tab" href="#filter_menu2">
                            QR scan
                        </a></li>
                    </ul>
                    <div class="tab-content">

                        <div id="filter_menu1" class="tab-pane fade in active" style="margin-top: 15px">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon3">Filter</span>
                                <input type="text" id="filter_text" class="form-control" title="filter_id" onchange="filterTextChanged(this)" aria-describedby="basic-addon3">
                            </div>

                            <div id="filter_info">

                            </div>

                            <div class="x_footer">
                                <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary" onclick="filterClear()">
                                            Clear
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="filter_menu2" class="tab-pane fade in" style="margin-top: 15px; text-align: center">

                            <video id="preview" style="width: 60%"></video>

                            <div id="preview_info">

                            </div>

                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon3">Filter</span>
                                <input type="text" id="filter_qr" class="form-control" aria-describedby="basic-addon3" readonly>
                            </div>

                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon3">Text</span>
                                <input type="text" id="text_qr" class="form-control" aria-describedby="basic-addon3" readonly>

                                <span class="input-group-btn">
                                    <button class="btn btn-secondary" type="button" onclick="scannerFollowLink(this)">Follow!</button>
                                </span>
                            </div>

                            <div class="x_footer">
                                <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary" onclick="scannerStart()">
                                            Start
                                        </button>
                                    </div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary" onclick="scannerStop()">
                                            Stop
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <div id="ProductionInfo" style="" >

                </div>
            </div>
            <div class="row">
                <div id="ProductionStatus" style="" >

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block right_sidebar %}

{% endblock %}

{% block javascripts %}
    {{ block.super}}
    <script type="text/javascript" src="{%static "js/bootstrap-treeview.js" %}"></script>
    <script type="text/javascript" src="{%static "js/instascan.min.js" %}"></script>
    <script type="text/javascript">
        {% include "ll_js/production.js" %}
    </script>

{% endblock %}