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

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

{% block Application_JS_File %}
<script src="{% static 'js/MQTTBridgeFirstPage.Click.js' %}"></script>
<script src="{% static 'js/MQTTBridgeFirstPage.h.js' %}"></script>
<script src="{% static 'js/MQTTBridgeFirstPage.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.MQTTBridge.MQTTBridgeTitle }}</div>
    <div><input id="AddUser" type="button" value="{{ lang.MQTTBridge.NewButton }}" onclick="AdddBridgeButton_click()"></div>
	<table id="Table_MQTTBridge" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><span>{{ lang.MQTTBridge.BridgeName }}</span></th>
                <th><span>{{ lang.MQTTBridge.Description }}</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 == "bridgeName" or k == "description" %}
                        <td>{{ v }}</td>
                    {% endif %}
                {% endfor %}
                {% for k, v in value.items %}
                    {% if k == "bridgeName" %}
                        <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>
                    {% endif %}
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

     <!--動態新增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>
                <button onclick="EditButton_click(this)">{{ lang.MQTTBridge.EditButton }}</button>
                <button onclick="RemoveButton_click(this)">{{ lang.MQTTBridge.RemoveButton }}</button>
            </td>
        </tr>
    </div>
{% endblock %}

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