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

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

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

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

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

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

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">MySQL</div>

    <!--內容設定-->
    <div class="Form" style="width:100%">
        <!--Mysql連線名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Mysql Name</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.mysqlname }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql Database名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Database Name</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.database }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql Table名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Table Name</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.tablename }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql IP-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Host</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.host }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql User-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">User</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.user }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql Password-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Password</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.password }}" onblur="">
                 <div class="Message">{{ lang.MQTTBridge.InvalidFormat }}</div>
            </div>
        </div>
        <!--Mysql 啟用-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Enable</div>
            <div class="RightColumn" style="width:70%">
                {% if form.status == "stopped" %}
                    <input class="Checkbox" type="checkbox"/>
                {% else %}
                    <input class="Checkbox" type="checkbox" checked />
                {% endif %}
            </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;">Confirm</button>
                <button onclick="CancelButton_click(this)" style="float: left;">Cancel</button>
                <div class="Message">{{ lang.MQTTBridge.CheckFormat }}</div>
            </div>
        </div>
    </div>
{% endblock %}

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