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

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

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

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

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

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

<!-- 中央內容 -->
{% block Main_Center-Content %}
    <!--伺服器網路介面選擇-->
    <!--
    <div class="FormTitle">{{ lang.NetworkSetting.ServerNetworkInterfaceSelection }}</div>
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">{{ lang.NetworkSetting.Interface }}</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <select id="ServerInterface" class="Select">
                </select>
            </div>
        </div>
        <div class="Row">
            <div class="LeftColumn" style="height:70px;"></div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <button class="Button" style="margin-left:10px;float:left;" onclick="ServerInterfaceSaveButton_click(this)">{{ lang.NetworkSetting.SaveButton }}</button>
            </div>
        </div>
    </div>
-->
    <!--Gateway介面選擇-->
    <div class="FormTitle">{{ lang.NetworkSetting.Gateway }}</div>
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">{{ lang.NetworkSetting.Interface }}</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <select id="GatewayInterface" class="Select">
                     <option value="LAN1">LAN 1</option>
                     <option value="LAN2">LAN 2</option>
                </select>
            </div>
        </div>
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">{{ lang.NetworkSetting.Gateway }}</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <input class="Text" type="text" value="" onblur="main_NetworkingFormat_blur(this)">
                <div class="Message">{{ lang.NetworkSetting.InvalidFormat }}</div>
            </div>
        </div>
    </div>
    <!--Lan1網路設定-->
    <div class="FormTitle">LAN 1</div>
    <div class="Form" style="width:100%">
        <!-- IP -->
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">IP</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <input class="Text" type="text" value="" onblur="main_NetworkingFormat_blur(this)">
                <div class="Message">{{ lang.NetworkSetting.InvalidFormat }}</div>
            </div>
        </div>
        <!-- Mask -->
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">Mask</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <input class="Text" type="text" value="" onblur="main_NetworkingFormat_blur(this)">
                <div class="Message">{{ lang.NetworkSetting.InvalidFormat }}</div>
            </div>
        </div>
    </div>
    <!--Lan2網路設定-->
    <div class="FormTitle">LAN 2</div>
    <div class="Form" style="width:100%">
        <!-- IP -->
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">IP</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <input class="Text" type="text" value="" onblur="main_NetworkingFormat_blur(this)">
                <div class="Message">{{ lang.NetworkSetting.InvalidFormat }}</div>
            </div>
        </div>
        <!-- Mask -->
        <div class="Row">
            <div class="LeftColumn" style="height:70px;">Mask</div>
            <div class="RightColumn" style="width:90%;height:100%;">
                <input class="Text" type="text" value="" onblur="main_NetworkingFormat_blur(this)">
                <div class="Message">{{ lang.NetworkSetting.InvalidFormat }}</div>
            </div>
        </div>
    </div>
    <!--儲存按鈕-->
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button class="Button" style="margin-left:10px;float:left;" onclick="SaveButton_click(this)">{{ lang.NetworkSetting.SaveButton }}</button>
                <div class="Message" style="color:#227700;float: left;">{{ lang.NetworkSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.NetworkSetting.SaveFailed }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.NetworkSetting.CheckFormat }}</div>
            </div>
        </div>
    </div>
{% endblock %}

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