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

{% block Application_JS_File %}
<script src="{% static 'js/LocalBrokerSetting.h.js' %}"></script>
<script src="{% static 'js/LocalBrokerSetting.Click.js' %}"></script>
<script src="{% static 'js/LocalBrokerSetting.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.LocalBrokerSetting.LocalBrokerSettingTitle }}</div>
	<!--內容設定-->
	<div class="Form" style="width:100%">
        <!-- 節點名稱 -->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.LocalBrokerSetting.NodeName }}</div>
        	<div class="RightColumn" style="width:100%">
                <input type="text" value="{{ form.NodeName }}">
        	</div>
		</div>
        <!-- 通訊埠 -->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.LocalBrokerSetting.Port }}</div>
        	<div class="RightColumn" style="width:100%">
                <input type="text" value="{{ form.Port }}">
        	</div>
		</div>
        <!-- 匿名登入 -->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.LocalBrokerSetting.AllowAnonymous }}</div>
            <div class="RightColumn" style="width:100%">
                {% if form.AllowAnonymous == 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;">SSL port</div>
            <div class="RightColumn" style="width:100%">
                <input type="text" value="{{ form.sslPort }}">
            </div>
        </div>
        <!--儲存按鈕-->
        <div class="Row">
            <div class="LeftColumn" style="width:20%;height:50px;"></div>
            <div class="RightColumn" style="width:100%">
                <button onclick="SaveButton_click(this)" style="margin-left:10px;float:left;">{{ lang.LocalBrokerSetting.SaveButton }}</button>
                <div class="Message" style="color:#227700;float: left;">{{ lang.LocalBrokerSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#227700;float: left;">{{ lang.LocalBrokerSetting.SaveFailed }}</div>
            </div>
        </div>
	</div>
{% endblock %}

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