<!DOCTYPE html>
<html>

<head>
    {% include "common/common-head.html" %}
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

        {% include "common/page-header.html" %} {% with pageselected="mqtt" %} {% include "common/sidebar-menu.html" %} {% endwith %}

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">



            <!-- Main content -->
            <section class="content">


                <div class="row">
                    <div class="col-xs-12">


                        <div class="box box-info">
                            <div class="box-header with-border">
                                <h3 class="box-title">MQTT configuration</h3>
                            </div>
                            <!-- /.box-header -->
                            <!-- form start -->
                            <form class="form-horizontal" method="post">
                                <div class="box-body">

                                    <div class="form-group">
                                        <label for="schema" class="col-sm-2 control-label">Schema</label>
                                        <div class="col-sm-10">
                                            <select class="form-control" id="schema" name="schema">
                      {% for i in schemas %}
                        {% if i == schema %}
                        <option value="{{ i }}" selected>{{ i }}</option>
                        {% else %}
                        <option value="{{ i }}">{{ i }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="host" class="col-sm-2 control-label">Host</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="host" name="host" placeholder="Hostname or IP address" value="{{ host }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="port" class="col-sm-2 control-label">Port</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="port" name="port" placeholder="1883" value="{{ port }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="clientid" class="col-sm-2 control-label">Client ID</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="clientid" name="clientid" placeholder="client id" value="{{ clientid }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="prefix" class="col-sm-2 control-label">Prefix</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="prefix" name="prefix" placeholder="topic prefix" value="{{ prefix }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="username" class="col-sm-2 control-label">Username</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="username (if required)" value="{{ username }}">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">Password</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="password" name="password" placeholder="password (if required)" value="{{ password }}">
                                        </div>
                                    </div>


                                </div>

                                <!-- /.box-body -->
                                <div class="box-footer">
                                    <button type="submit" class="btn btn-info pull-right">Save</button>
                                </div>
                                <!-- /.box-footer -->
                            </form>
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->

            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        {% include "common/footer.html" %}

    </div>
    <!-- ./wrapper -->

    {% include "common/common-js.html" %}

</body>

</html>