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

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

{% block Application_JS_File %}
<script src="{% static 'js/FTPserver.Click.js' %}"></script>
<script src="{% static 'js/FTPserver.Blur.js' %}"></script>
<script src="{% static 'js/FTPserver.h.js' %}"></script>
<script src="{% static 'js/FTPserver.jpp.js' %}"></script>
{% endblock %}

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

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

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

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">FTPserver</div>
    <div><input id="AddFTP" type="button" value="Add" onclick="AddFTPButton_click(this)"></div>
	<div class="PopupBoxRow">
    {% for key, value in form.items %}
        <div class="PopupBox-Container">
        <div class="PopupBox">
            <div class="PopupIndex" style="display: none">{{ key }}</div>
            {% for k, v in value.items %}
                {% if k == "Nickname" %}
                <!-- FTP name -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">Nickname</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}" style="float: left" onblur="main_CheckNickName_blur(this)">
                        <div class="Message" style="float: left; color:#FF0000">This field is required</div>
                    </div>
                </div>
                {% endif %}
                {% if k == "Description" %}
                <!-- Description -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">Description</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}">
                    </div>
                </div>
                {% endif %}
                {% if k == "Address" %}
                <!-- Server address -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">Address</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}" style="float: left" onblur="main_IPAddressFormat_blur(this)">
                        <div class="Message" style="float: left; color:#FF0000">Invalid Format</div>
                    </div>
                </div>
                {% endif %}
                {% if k == "Port" %}
                <!-- Port -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">Port</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}">
                    </div>
                </div>
                {% endif %}
                {% if k == "User" %}
                <!-- User -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">User</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}">
                    </div>
                </div>
                {% endif %}
                {% if k == "Password" %}
                <!-- Password -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;">Password</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Password" type="password" value="{{ v }}" onblur="">
                    </div>
                </div>
                {% endif %}
                {% if k == "UploadPath" %}
                <!-- Upload Path -->
                <div class="Row">
                    <div class="LeftColumn" style="height:50px;font-size: 15px">Upload Path</div>
                    <div class="RightColumn" style="width:70%">
                        <input class="Text" type="text" value="{{ v }}">
                    </div>
                </div>
                {% endif %}
            {% endfor %}
            <!-- Connection Testing -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;font-size: 15px">Connection Testing</div>
                <div class="RightColumn" style="width:70%">
                    <button onclick="ConnectionTestButton_click(this)" style="float: left">test</button>
                    <div class="Message" style="color:#227700; float: left; padding-top: 5px">OK</div>
                    <div class="Message" style="color:#FF0000; float: left; padding-top: 5px">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)">Confirm</button>
                    <button onclick="CancelButton_click(this)">Cancel</button>
                    <div class="Message" style="color:#FF0000;float: left;">Please Check Format</div>
                </div>
            </div>
            
        </div>
        </div>        
    {% endfor %}
    </div>
    
    <table id="Table_FTPserver" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><span>Name</span></th>
                <th><span>Address</span></th>
            </tr>
        </thead>
        <tbody>
            
            {% for key, value in form.items %}
            <tr>
                <td class="TableIndex" style="display: none">{{ key }}</td>
                {% for k, v in value.items %}
                    {% if k == "Nickname" %}
                        <td>{{ v }}</td>
                    {% elif k == "Address" %}
                        <td>{{ v }}</td>
                    {% endif %}
                {% endfor %}
                <td>
                    <button onclick="EditButton_click(this)" style="border: 0; background: transparent; float: left;">
                        <img src="{% static 'images/settings.png'%}" width="20" height="20" alt="settings.png not found">
                    </button>
                     <button onclick="RemoveButton_click(this)" style="border: 0; background: transparent; float: left;">
                        <img src="{% static 'images/remove.png'%}" width="20" height="20" alt="remove.png not found">
                    </button>
                </td>
            </tr>
            {% endfor %}
            
        </tbody>
    </table>

    <!--動態新增Popup Box-->
    <div class="DynamicPopupBoxRow" style="display: none;">
        <div class="PopupBox-Container">
        <div class="PopupBox">
            <div class="PopupIndex" style="display: none">0</div>
            <!-- FTP name -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;">Nickname</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="" style="float: left" onblur="main_CheckNickName_blur(this)">
                    <div class="Message" style="float: left; color:#FF0000">This field is required</div>
                </div>
            </div>
            <!-- Description -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;">Description</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="">
                </div>
            </div>
            <!-- Server address -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;">Address</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="" style="float: left" onblur="main_IPAddressFormat_blur(this)">
                    <div class="Message" style="float: left; color:#FF0000">Invalid Format</div>
                </div>
            </div>
            <!-- Port -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;">Port</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="">
                </div>
            </div>
            <!-- User -->
            <div class="Row">
               <div class="LeftColumn" style="height:50px;">User</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="">
                </div>
            </div>
            <!-- Password -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;">Password</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Password" type="password" value="" onblur="">
                </div>
            </div>
            <!-- Upload Path -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;font-size: 15px">Upload Path</div>
                <div class="RightColumn" style="width:70%">
                    <input class="Text" type="text" value="">
                </div>
            </div>
            <!-- Connection Testing -->
            <div class="Row">
                <div class="LeftColumn" style="height:50px;font-size: 15px">Connection Testing</div>
                <div class="RightColumn" style="width:70%">
                    <button onclick="ConnectionTestButton_click(this)" style="float: left">test</button>
                    <div class="Message" style="color:#227700; float: left; padding-top: 5px">OK</div>
                    <div class="Message" style="color:#FF0000; float: left; padding-top: 5px">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)">Confirm</button>
                    <button onclick="CancelButton_click(this)">Cancel</button>
                    <div class="Message" style="color:#FF0000;float: left;">Please Check Format</div>
                </div>
            </div>
        </div> 
        </div>        
    </div>
{% endblock %}

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