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

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

{% block Application_JS_File %}
<script src="{% static 'js/SqlServerSecondPage.Click.js' %}"></script>
<script src="{% static 'js/SqlServerSecondPage.Blur.js' %}"></script>
<script src="{% static 'js/SqlServerSecondPage.h.js' %}"></script>
<script src="{% static 'js/SqlServerSecondPage.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        SqlServerSecondPage.prototype._Startup_("{{ form.context|safe }}", "{{ form.pocky|safe }}");
    });
</script>
{% endblock %}

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

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

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

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

    <!--內容設定-->
    <div class="Form" style="width:100%">
        <!--SqlServer連線名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.ConnectionName }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.sqlservername }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer連線描述-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.Description }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.description }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer Database名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.DatabaseName }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.database }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer Table名稱-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.TableName }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.tablename }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer IP-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.Host }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.host }}" onblur="main_CheckIpFormat_blur(this)">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer Port-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.Port }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.port }}" onblur="main_CheckPortFormat_blur(this)">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer User-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.User }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="{{ form.user }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer Password-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.Password }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Password" type="password" value="{{ form.password }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
        <!--SqlServer 啟用-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.SqlServer.Enable }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Checkbox" type="checkbox"/>
            </div>
        </div>
        <!--MQTT轉發-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px">{{ lang.SqlServer.ForwardTopic }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" style="width:100%" value="{{ form.forwardtopic }}">
                 <div class="Message">{{ lang.SqlServer.InvalidFormat }}</div>
            </div>
        </div>
         <!--連線測試-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px">{{ lang.SqlServer.ConnectionTest }}</div>
            <div class="RightColumn" style="width:70%">
                 <button onclick="SqlServerTestButton_click(this)" style="float: left;">Test</button>
                 <div class="TestMessage" style="color:#00BB00">{{ lang.SqlServer.Success }}</div>
                 <div class="TestMessage" style="color:#FF0000">{{ lang.SqlServer.Failed }}</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.SqlServer.ConfirmButton }}</button>
                <button onclick="CancelButton_click(this)" style="float: left;">{{ lang.SqlServer.CancelButton }}</button>
                <div class="Message">{{ lang.SqlServer.CheckFormat }}</div>
            </div>
        </div>
    </div>
{% endblock %}

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