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

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

{% block Application_JS_File %}
<script src="{% static 'js/MQTTListTopic.Click.js' %}"></script>
<script src="{% static 'js/MQTTListTopic.Blur.js' %}"></script>
<script src="{% static 'js/MQTTListTopic.h.js' %}"></script>
<script src="{% static 'js/MQTTListTopic.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        MQTTListTopic.prototype._Startup_("{{ form|safe }}");
    });
</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">網路健康檢查</div>

    <div class="container">
    
        <div class="btn-container">
            <button class="btn" id="add-device-btn">新增設備</button>
            <button class="delete-btn" id="delete-devices-btn">刪除</button>
        </div>
    
        <div class="device-list-container">
            <div class="flex-row flex-header">
                <div class="flex-cell check-cell"><input type="checkbox" id="select-all"></div>
                <div class="flex-cell ip-cell">IP 位址</div>
                <div class="flex-cell name-cell">設備名稱</div>
                <div class="flex-cell message-cell">發布訊息</div>
                <div class="flex-cell scan-cell">掃描方式</div>
            </div>
      
            <div id="device-list">
            <!-- 動態添加的行會出現在這裡 -->
            </div>
        </div>
    
        <div id="empty-message" class="empty-message">
            目前沒有設備，請點擊上方「新增設備」按鈕添加設備。
        </div>
    </div>

    
    <!--
    <div class="Form" style="width:100%">
        
	</div>
    -->
    <!--動態新增Table Row-->
    <div class="DynamicRow" style="display: none;">
        <div class="flex-row">
            <div class="flex-cell check-cell"><input type="checkbox" class="device-checkbox"></div>
            <div class="flex-cell ip-cell"><input type="text" placeholder="192.168.1.1" class="ip-input"></div>
            <div class="flex-cell name-cell"><input type="text" placeholder="設備名稱" class="name-input"></div>
            <div class="flex-cell message-cell"><input type="text" placeholder="訊息內容" class="message-input"></div>
            <div class="flex-cell scan-cell">
                <div class="scan-options">
                    <div class="scan-option">
                        <label><input type="checkbox" class="scan-checkbox" value="ping"> Ping</label>
                    </div>
                    <div class="scan-option">
                        <label><input type="checkbox" class="scan-checkbox" value="curl"> Curl</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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