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

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

{% block Application_JS_File %}
<script src="{% static 'js/MQTTCluster.Click.js' %}"></script>
<script src="{% static 'js/MQTTCluster.h.js' %}"></script>
<script src="{% static 'js/MQTTCluster.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        MQTTCluster.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">{{ lang.MQTTCluster.MQTTClusterTitle }}</div>
	<div class="container">
        <!-- 第一列: Cluster 狀態 -->
        <div class="section">
            <div class="section-title">{{ lang.MQTTCluster.ClusterStatus }}</div>

            <div class="control-row">
                <button class="btn btn-danger" onclick="LeaveCluster_click()">{{ lang.MQTTCluster.LeaveCluster }}</button>
            </div>

            <div class="cluster-status-container">
            </div>
        </div>

        <!-- 第二列: 設備列表 -->
        <div class="section">        
            <div class="section-title">{{ lang.MQTTCluster.DeviceList }}</div>

            <div class="control-row">
                <button class="btn btn-primary" onclick="JoinCluster_click()">{{ lang.MQTTCluster.Join }}</button>
                <button class="btn btn-secondary" onclick="Refresh_click()">{{ lang.MQTTCluster.Refresh }}</button>
            </div>

            <div class="device-list-container">
            </div>
        </div>
    </div>

    <!--動態新增Row-->
    <div id="clusterStatus-online" style="display: none;">
        <div class="status-item">
            <div class="status-field">
                <span class="status-label">{{ lang.MQTTCluster.NodeName }}</span>
                <span class="status-value"></span>
            </div>
            <div class="status-field">
                <span class="status-label">Host</span>
                <span class="status-value"></span>
            </div>
            <span class="status-badge status-online">{{ lang.MQTTCluster.Online }}</span>
        </div>
    </div>

    <div id="clusterStatus-offline" style="display: none;">
        <div class="status-item">
            <div class="status-field">
                <span class="status-label">{{ lang.MQTTCluster.NodeName }}</span>
                <span class="status-value"></span>
            </div>
            <div class="status-field">
                <span class="status-label">Host</span>
                <span class="status-value"></span>
            </div>
            <span class="status-badge status-offline">{{ lang.MQTTCluster.Offline }}</span>
        </div>
    </div>
    <div id="device-list-row" style="display: none;">
        <div class="device-item">
            <input type="checkbox" class="device-checkbox" onclick="DeviceListCheckbox_click(this)">
            <input type="text" class="device-ip" value="" readonly>
        </div>
    </div>
{% endblock %}

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