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

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

{% block Application_JS_File %}
<script src="{% static 'js/Utility.Click.js' %}"></script>
<script src="{% static 'js/Utility.Blur.js' %}"></script>
<script src="{% static 'js/Utility.h.js' %}"></script>
<script src="{% static 'js/Utility.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        Utility.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_SystemSetting.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">Utility Password</div>
    <div class="Form" style="width:100%">
        <!--密碼設定-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.Utility.Password }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Password" type="password" style="float: left;" onblur="main_CheckPasswordFormat_blur(this)" value="">
                 <div class="Message">{{ lang.Utility.InvalidFormat }}</div>
             </div>
        </div>
        
        <!--確認密碼-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">{{ lang.Utility.VerifyPassword }}</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Password" type="password" style="float: left;" onblur="main_VerifyPassword_blur(this)" >
                 <div class="Message" style="color:#00BB00">{{ lang.Utility.PasswordCorrect }}</div>
                 <div class="Message" style="color:#FF0000">{{ lang.Utility.PasswordNotMatch }}</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="SavePasswordButton_click(this)">{{ lang.Utility.SaveButton }}</button>
                <div class="Message" style="color:#00BB00">{{ lang.Utility.SaveSuccess }}</div>
                <div class="Message">{{ lang.Utility.SaveFailed }}</div>
                <div class="Message">{{ lang.Utility.CheckFormat }}</div>
            </div>
        </div>
    </div>

    <br>

    <div class="FormTitle">Alias</div>
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Alias</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" style="float: left;" onblur="main_CheckAliasLength_blur(this)" value="">
                 <div class="Message">{{ lang.Utility.LimitLength }}</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="SaveAliasButton_click(this)">{{ lang.Utility.SaveButton }}</button>
                <div class="Message" style="color:#00BB00">{{ lang.Utility.SaveSuccess }}</div>
                <div class="Message">{{ lang.Utility.SaveFailed }}</div>
                <div class="Message">{{ lang.Utility.CheckFormat }}</div>
            </div>
        </div>
    </div>

    <br>
    
    <div class="FormTitle">Hostname</div>
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Hostname</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" style="float: left;" onblur="main_CheckHostnameLength_blur(this)" value="">
                 <div class="Message">{{ lang.Utility.FieldRequired }}</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="SaveHostnameButton_click(this)">{{ lang.Utility.SaveButton }}</button>
                <div class="Message" style="color:#00BB00">{{ lang.Utility.SaveSuccess }}</div>
                <div class="Message">{{ lang.Utility.SaveFailed }}</div>
                <div class="Message">{{ lang.Utility.CheckFormat }}</div>
            </div>
        </div>
    </div>
    
{% endblock %}

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