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

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

{% block Application_JS_File %}
<script src="{% static 'js/KeepAliveSetting.Click.js' %}"></script>
<script src="{% static 'js/KeepAliveSetting.Blur.js' %}"></script>
<script src="{% static 'js/KeepAliveSetting.h.js' %}"></script>
<script src="{% static 'js/KeepAliveSetting.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">{{ lang.KeepAliveSetting.KeepAliveSettingTitle }}</div>
	<!--內容設定-->
	<div class="Form" style="width:100%">
        <!--啟用-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.KeepAliveEnable }}</div>
            <div class="RightColumn" style="width:70%">
                {% if form.KeepAliveEnable == True %}
                    <input class="Checkbox" type="checkbox" checked />
                {% else %}
                    <input class="Checkbox" type="checkbox"/>
                {% endif %}
            </div>
        </div>
        <!--Keep Alive網路通訊介面-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.Interface }}</div>
        	<div class="RightColumn" style="width:70%">
                <select id="ProtocolVersion" class="Select">
                    {% if form.Interface == "eth0" %}
                        <option value="eth0" selected="selected">LAN 1</option>
                        <option value="eth1">LAN 2</option>
                    {% elif form.Interface == "eth1" %}
                        <option value="eth0">LAN 1</option>
                        <option value="eth1" selected="selected">LAN 2</option>
                    {% endif %}
                </select>
        	</div>
		</div>
        <!--Keep Alive搶佔模式-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.Preempt }}</div>
            <div class="RightColumn" style="width:70%">
                {% if form.PreemptEnable == True %}
                    <input class="Checkbox" type="checkbox" checked />
                {% else %}
                    <input class="Checkbox" type="checkbox"/>
                {% endif %}
            </div>
        </div>
		<!--Keep Alive優先權-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.Priority }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.Priority }}" onblur="main_Priority_blur(this)">
                <div class="Message">{{ lang.KeepAliveSetting.InvalidFormat }}</div>
            </div>
        </div>
        <!--Virtual Router ID-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.VirtualRouterID }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.VirtualRouterID }}" onblur="main_VirtualRouterID_blur(this)">
                <div class="Message">{{ lang.KeepAliveSetting.InvalidFormat }}</div>
            </div>
        </div>
        <!--Virtual IP Address-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.KeepAliveSetting.VirtualIPAddress }}</div>
            <div class="RightColumn" style="width:70%">
                <input class="Text" type="text" value="{{ form.VirtualIPAddress }}" onblur="main_VirtualIPAddress_blur(this)">
                <div class="Message">{{ lang.KeepAliveSetting.InvalidFormat }}</div>
            </div>
        </div>
        <!--儲存按鈕-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button class="Button" style="float: left;" onclick="KeepaliveSaveButton_click(this)">{{ lang.KeepAliveSetting.SaveButton }}</button>
                 <div class="Message">{{ lang.KeepAliveSetting.SaveSuccess }}</div>
                <div class="Message">{{ lang.KeepAliveSetting.SaveFailed }}</div>
                <div class="Message">{{ lang.KeepAliveSetting.CheckFormat }}</div>
            </div>
        </div>
	</div>
{% endblock %}

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