{% 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">List topic</div>

    <div class="search-sort-container">
        <div style="padding-top: 9px">排序</div>
        <input type="text" id="searchInput" onblur="SearchInput_blur(this)" placeholder="輸入關鍵字">
        <select id="filterSelect">
            <option value="clientId">Client ID</option>
            <option value="topic">Topic</option>
        </select>
    </div>
	<!--內容設定-->
    <div class="container">
        <div class="header-row">
            <div class="header-column">Client ID</div>
            <div class="header-column">Topic</div>
        </div>

        <div id="gridBody">
            <!-- 內容將由 JavaScript 動態生成 -->
        </div>
        
        <div class="pagination">
            <button id="prevPage" onclick="PrevPageButton_click(this)">上一頁</button>
            <span id="currentPage">第 1 頁</span>
            <button id="nextPage" onclick="NextPageButton_click(this)">下一頁</button>
        </div>
        <div class="pagination-info" id="pageInfo">
            共 0 筆資料，總共 0 頁
        </div>
    </div>
    <!--
    <div class="Form" style="width:100%">
        
	</div>
    -->
    <!--動態新增Table Row-->
    <div class="DynamicRow" style="display: none;">
        <div class="grid-row">
            <div class="textarea-column">
                <textarea class="text-area" readonly></textarea>
            </div>
            <div class="textarea-column">
                <textarea class="text-area" readonly></textarea>
            </div>
            <div class="button-column">
                <button class="copy-button" onclick="CopyTopicButton_click(this)">複製文字</button>
                <div class="success-message" id="successMessage">複製成功！</div>
            </div>
        </div>
    </div>
    <div class="DynamicTableRow" style="display: none;">
        <div class="container">
            <div class="text-column">
                <textarea class="text-area" id="textToCopy" readonly></textarea>
            </div>
            <div class="button-column">
                <button class="copy-button" id="copyButton" onclick="CopyTopicButton_click(this)">複製文字</button>
                <div class="success-message" id="successMessage">複製成功！</div>
            </div>
        </div>
    </div>
{% endblock %}

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