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

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

{% block Application_JS_File %}
<script src="{% static 'js/AccountSetting.Click.js' %}"></script>
<script src="{% static 'js/AccountSetting.Blur.js' %}"></script>
<script src="{% static 'js/AccountSetting.h.js' %}"></script>
<script src="{% static 'js/AccountSetting.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        AccountSetting.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">{{ lang.AccountSetting.AccountSettingTitle }}</div>
	<!--內容設定-->
	<div class="Form" style="width:100%">
        <!--帳號-->
		<div class="Row">
			<div class="LeftColumn" style="height:70px;">{{ lang.AccountSetting.Account }}</div>
        	<div class="RightColumn" style="width:90%;height:100%;">
                <input type="text" value="{{ form.Account }}" onblur="main_Account_blur(this)">
                <div class="Flex">
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredLength }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgNoSpecialChar }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredUpperCase }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredLowerCase }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredDigits }}</div>
                </div>
        	</div>
		</div>
        <!--密碼-->
		<div class="Row">
			<div class="LeftColumn" style="height:70px;">{{ lang.AccountSetting.Password }}</div>
        	<div class="RightColumn" style="width:90%">
                <input type="password" value="{{ form.Password }}" onblur="main_Password_blur(this)">
                <div class="Flex">
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredLength }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgNoSpecialChar }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredUpperCase }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredLowerCase }}</div>
                    <div class="Message" style="color:#FF0000">{{ lang.AccountSetting.ErrMsgRequiredDigits }}</div>
                </div>
        	</div>
		</div>
        <!--儲存按鈕-->
        <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="AccountSettingSaveButton_click(this)">{{ lang.AccountSetting.SaveButton }}</button>
                <div class="Message" style="color:#227700;float: left;">{{ lang.AccountSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.AccountSetting.SaveFailed }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.AccountSetting.CheckFormat }}</div>
            </div>
        </div>
	</div>
{% endblock %}

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