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

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

{% block Application_JS_File %}
<script src="{% static 'js/MySQLFirstPage.Click.js' %}"></script>
<script src="{% static 'js/MySQLFirstPage.h.js' %}"></script>
<script src="{% static 'js/MySQLFirstPage.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">MySQL</div>
	<div class="MysqlListArea">
        <div class="FirstRow">
            <div class="DatabaseColumn" style="visibility: hidden;width: 5%"></div>
            <div class="DatabaseColumn" style="width: 40%">Connection Name</div>
            <div class="DatabaseColumn" style="width: 20%">Status</div>
            <div class="DatabaseColumn" style="width: 20%">Setting</div>
        </div>
        <div class="SecondRow">
            <div class="DatabaseColumn">
                <button onclick="AddButton_click(this)">+</button>
            </div>
            <div class="DatabaseColumn" style="width: 40%">
                <input type="text" style="width: 80%" value="">
            </div>
        </div>
        <div class="ThirdRow">
            {% for key, value in form.items %}
                <div>
                    <!--Database Index-->
                    <div class="DatabaseColumn" style="visibility: hidden;width: 5%">{{ key }}</div>
                    {% for k, v in value.items %}
                        {% if k == "mysqlname" %}
                        <!--Database Connection Name-->
                        <div class="DatabaseColumn" style="width: 40%">{{ v }}</div>
                        {% endif %}
                        {% if k == "status" %}
                        <!--Database Status-->
                        <div class="DatabaseColumn" style="width: 20%">{{ v }}</div>
                        {% endif %}
                    {% endfor %}
                    <!--Database Setting-->
                    <div class="DatabaseColumn">
                        <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>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <!--動態新增Row-->
    <div class="DynamicRow" style="display: none;">
        <div class="DatabaseRow">
            <!--Database Index-->
            <div class="DatabaseColumn" style="visibility: hidden;width: 5%"></div>
            <!--Database Connection Name-->
            <div class="DatabaseColumn" style="width: 40%"></div>
            <!--Database Status-->
            <div class="DatabaseColumn" style="width: 20%">Status</div>
            <!--Database Setting-->
            <div class="DatabaseColumn">
                <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>
            </div>
        </div>
    </div>
{% endblock %}

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