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

{% block Application_CSS_File %}
<link rel="stylesheet" type="text/css" href="{% static 'css/MQTTBridgeSecondPage.css' %}">
{% endblock %}

{% block Application_JS_File %}
<script src="{% static 'js/MQTTBridgeSecondPage.Click.js' %}"></script>
<script src="{% static 'js/MQTTBridgeSecondPage.Blur.js' %}"></script>
<script src="{% static 'js/MQTTBridgeSecondPage.h.js' %}"></script>
<script src="{% static 'js/MQTTBridgeSecondPage.jpp.js' %}"></script>
{% endblock %}

<!-- 上方內容 -->
{% block Main_Top-General %}
{% endblock %}

<!-- 當前網頁路徑 -->
{% block Main_Top-Path %}
{% endblock %}

<!-- 左方列表-->
{% block Main_Left-List %}
    {% include 'LeftList_MQTTSetting.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">{{ lang.MQTTBridge.MQTTBridgeTitle }}</div>
	<!--內容設定-->
	<div class="Form" style="width:100%">
        
        <!--Bridge連線名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.BridgeName }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.bridgeName }}" onblur="main_BridgeName_blur(this)">
                 <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--描述-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Description }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.description }}">
            </div>
        </div>
        <!--Client ID-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.ClientID }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.clientid }}" onblur="main_ClientID_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
            </div>
        </div>
        <!--遠端節點名稱-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Host }}</div>
        	<div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.host }}" onblur="main_RemoteNodeName_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
                <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
        	</div>
		</div>
        <!--遠端Broker Port-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Port }}</div>
        	<div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.port }}" onblur="main_RemotePort_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
                <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
        	</div>
		</div>
         <!--遠端Broker帳號-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Username }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.username }}" onblur="main_RemoteAccount_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
            </div>
        </div>
        <!--遠端Broker密碼-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Password }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.password }}" onblur="main_RemotePassword_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
            </div>
        </div>
        <!--Keep Alive-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.KeepAlive }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.keepalive }}" onblur="main_KeepAlive_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
                <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Clean Start-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.CleanStart }}</div>
            <div class="RightColumn" style="width:70%">
                {% if form.cleanStart == True %}
                    <input class="Checkbox" type="checkbox" checked />
                {% else %}
                    <input class="Checkbox" type="checkbox"/>
                {% endif %}
            </div>
        </div>
        <!--斷線重連間格時間-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.ReconnectInterval }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.reconnect_interval }}" onblur="main_ReconnectInterval_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
                <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--MQTT協議版本-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.MQTTProtcolVersion }}</div>
            <div class="RightColumn" style="width:70%">
                <select id="ProtocolVersion" class="Select">
                    {% if form.proto_ver == "mqttv3" %}
                        <option value="mqttv3" selected="selected">MQTTv3</option>
                        <option value="mqttv4">MQTTv4</option>
                        <option value="mqttv5">MQTTv5</option>
                    {% elif form.proto_ver == "mqttv4" %}
                        <option value="mqttv3">MQTTv3</option>
                        <option value="mqttv4" selected="selected">MQTTv4</option>
                        <option value="mqttv5">MQTTv5</option>
                    {% else %}
                        <option value="mqttv3">MQTTv3</option>
                        <option value="mqttv4">MQTTv4</option>
                        <option value="mqttv5" selected="selected">MQTTv5</option>
                    {% endif %}
                </select>
            </div>
        </div>
        <!--啟用 Bridge 前贅字串-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.EnableMountPoint }}</div>
            <div class="RightColumn" style="width:70%">
                {% if form.enableMountpoint == True %}
                    <input class="Checkbox" type="checkbox" checked />
                {% else %}
                    <input class="Checkbox" type="checkbox"/>
                {% endif %}
            </div>
        </div>
        <!--Mount Point-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.MountPoint }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.forward_mountpoint }}" onblur="main_CheckMountPointFormat_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
            </div>
        </div>
        <!--轉發Topic-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.MQTTBridge.Forwards }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.forwards }}" onblur="main_CheckForwardTopicFormat_blur(this)">
                <div class="Message" style="float: left; color:#FF0000">{{ lang.MQTTBridge.FieldRequired }}</div>
            </div>
        </div>
        
        <!--儲存按鈕-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button onclick="ConfirmButton_click(this)" style="float: left;">{{ lang.MQTTBridge.ConfirmButton }}</button>
                <button onclick="CancelButton_click(this)" style="float: left;">{{ lang.MQTTBridge.CancelButton }}</button>
                <div class="Message">{{ lang.MQTTBridge.CheckFormat }}</div>
            </div>
        </div>
        
	</div>
{% endblock %}

<!-- 下方資訊-->
{% block Main_Bottom-Information %}
{% endblock %}