<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" type="image/x-icon" href="/static/favicon.png"/>
    <title>{{ title }} - {{ path }}</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/dialog/css/bootstrap-dialog.min.css">
    {% block style %}
    {% endblock %}
</head>

<body>

<div class="container">

    <div class="row">
        <h2 style="margin-left: 5px"><a href="/">{{ title }}</a> - {{ path }}</h2>
    </div>

    <div class="row well" style="padding: 7px;margin-bottom: 5px;">

        {% block search %}
            <form class="form-inline" style="float: left;">
                <div class="form-group">
                    <div class="input-group">
                        <input type="search"
                               class="form-control light-table-filter finder-search"
                               data-table="order-table"
                               placeholder="file name">
                        <div class="input-group-addon">Filter</div>
                    </div>
                </div>
            </form>
        {% endblock %}


        <div style="float: right;" class="btn-group" role="group" aria-label="Basic example">
            {% block upload %}
                <button onclick="qrcode()" type="button" class="btn btn-secondary btn-primary">
                    <span style="font-size: small;" class="glyphicon glyphicon-qrcode"></span>
                </button>
            {% endblock %}
        </div>


    </div>

    {% block body %}
    {% endblock %}

    <script src="/static/jquery-1.12.1.min.js"></script>
    <script src="/static/jquery.qrcode.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/dialog/js/bootstrap-dialog.min.js"></script>
    <script>
        function qrcode() {
            var $textAndPic = $('<div style="text-align: center" id="qrcode"></div>');
            BootstrapDialog.show({
                size: BootstrapDialog.SIZE_SMALL,
                title: 'QR Code',
                message: $textAndPic,
                buttons: [{
                    label: 'Close',
                    action: function (dialogRef) {
                        dialogRef.close();
                    }
                }],
                onshown: function (dialogRef) {
                    dialogRef.getModalContent().find("div[id='qrcode']").qrcode({
                        width: 200,
                        height: 200,
                        text: window.location.href
                    });
                }
            });

        }
    </script>

    {% block script %}
    {% endblock %}

</div>
</body>

</html>