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

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

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

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

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

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

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">{{ lang.MQTTUser.MQTTUserTitle }}</div>
    <div><input id="AddUser" type="button" value="{{ lang.MQTTUser.AddUserButton }}" onclick="AddUserButton_click()"></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 %}
                    <div class="LeftColumn">{{ k }}</div>
                    <div class="RightColumn">
                        <input type="text" value="{{ v }}">
                    </div>
                {% endfor %}
                <button onclick="ConfirmButton_click(this)">{{ lang.MQTTUser.ConfirmButton }}</button>
                <button onclick="CancelButton_click(this)">{{ lang.MQTTUser.CancelButton }}</button>
            </div>
        </div>
        {% endfor %}
    </div>
    <table id="Table_MQTTUsers" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><span>{{ lang.MQTTUser.Username }}</span></th>
                <th><span>{{ lang.MQTTUser.Remark }}</span></th>
                <th><span></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 != "Password" %}
                        <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>
            <div class="Row">
                <div class="LeftColumn">{{ lang.MQTTUser.Username }}</div>
                <div class="RightColumn">
                    <input type="text" value="">
                </div>
            </div>
            <div class="Row">
                <div class="LeftColumn">{{ lang.MQTTUser.Password }}</div>
                <div class="RightColumn">
                    <input type="text" value="">
                </div>
            </div>
            <div class="Row">
                <div class="LeftColumn">{{ lang.MQTTUser.Remark }}</div>
                <div class="RightColumn">
                    <input type="text" value="">
                </div>
            </div>
            <button onclick="ConfirmButton_click(this)">{{ lang.MQTTUser.ConfirmButton }}</button>
            <button onclick="CancelButton_click(this)">{{ lang.MQTTUser.CancelButton }}</button>
        </div>
        </div>
    </div>

    <!--動態新增Table Row-->
    <div class="DynamicTableRow" style="display: none;">
        <tr>
            <td class="TableIndex" style="display: none">0</td>
            <td><input type="text" value="" readonly="readonly"></td>
            <td><input type="text" value="" readonly="readonly"></td>
            <td><input type="submit" value="Edit"></td>
        </tr>
    </div>

    <!--動態新增Table Row-->
{% endblock %}

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