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

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

{% block Application_JS_File %}
<script src="{% static 'js/MQTTWebsocket.Click.js' %}"></script>
<script src="{% static 'js/MQTTWebsocket.Blur.js' %}"></script>
<script src="{% static 'js/MQTTWebsocket.h.js' %}"></script>
<script src="{% static 'js/MQTTWebsocket.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.MQTTWebsocket.MQTTWebsocketTitle }}</div>
    <div class="Form" style="width:100%">
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Websocket Port</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" style="float: left;" readonly value="8083">
             </div>
        </div>
    </div>
    <!--
    <div class="ClientBlocklistArea">
        <div class="FirstRow">
            <input class="Checkbox" type="checkbox" style="float: left; margin-top: 24px; margin-left: 10px;" onclick="SelectAllBlocklist_click(this)">
            <div style="float: left; margin-top: 20px; margin-left: 8px" >{{ lang.MQTTWebsocket.SelectAll }}</div>
            <button style="float: left; margin-top: 20px; margin-left: 20px" onclick="LiftedBlocklist_click(this)">{{ lang.MQTTWebsocket.UnBlock }}</button>
        </div>
        {% for key, value in blocklist.items %}
        <div class="Row">
            <div class="RoleNumber" style="display: none">{{ key }}</div>
            <div class="Column" style="width: 7%">
                 <input class="Checkbox" type="checkbox" style="float: left; margin-top: 24px; margin-left: 10px;">
            </div>
             <div class="Column">
                <input class="Text" type="text" value="{{ value }}" style="margin-top: 10%;" readonly="readonly">
            </div>
        </div>
        {% endfor %}
    </div>

    <br>

    <div class="RealTimeClientListArea">
        <div class="FirstRow">
            <input class="Checkbox" type="checkbox" style="float: left; margin-top: 24px; margin-left: 10px;" onclick="SelectAllClients_click(this)">
            <div style="float: left; margin-top: 20px; margin-left: 8px" >{{ lang.MQTTWebsocket.SelectAll }}</div>
            <button style="float: left; margin-top: 20px; margin-left: 20px" onclick="AddToBlocklist_click(this)">{{ lang.MQTTWebsocket.Blocklist }}</button>
            <button style="float: left; margin-top: 20px; margin-left: 55px" onclick="UpdateClientList_click(this)">{{ lang.MQTTWebsocket.Update }}</button>
        </div>
        <div class="SecondRow">
            <div class="Column" style="visibility: hidden;width: 7%">Space</div>
            <div class="Column" style="margin-top: 20px">IP : port</div>
            <div class="Column" style="margin-top: 20px;font-size: 15px">{{ lang.MQTTWebsocket.ConnectionTimestamp }}</div>
            <div class="Column" style="margin-top: 20px">{{ lang.MQTTWebsocket.ConnectionStatus }}</div>
        </div>
        {% for key, value in form.items %}
        <div class="Row">
            <div class="Column" style="width: 7%">
                 <input class="Checkbox" type="checkbox" style="float: left; margin-top: 24px; margin-left: 10px;">
            </div>
            <div class="Column">
                <input class="Text" type="text" value="{{ value.peername }}" style="margin-top: 10%;width: 90%" readonly="readonly">
            </div>
            <div class="Column">
                <input class="Text" type="text" value="{{ value.connected_at }}" style="margin-top: 10%;width: 90%" readonly="readonly">
            </div>
            <div class="Column">
                <input class="Text" type="text" value="{{ value.connected }}" style="margin-top: 10%;width: 30%" readonly="readonly">
            </div>
            <button type="button" style="float: right; margin-right: 11%; width: 82%; margin-top: 6px" onclick="ShowClientPropertiesButton_click(this)">展開</button>
            <button type="button" style="float: right; margin-right: 11%; width: 82%; margin-top: 6px; display: none" onclick="HideClientPropertiesButton_click(this)">隱藏</button>
            
            <div class="ClientStatus" style="display: none;">
                <div class="Flex-Object">
                    <div class="Flex-Child LeftColumn">User name :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.username }}" readonly="readonly">
                    </div>
                    <div class="Flex-Child LeftColumn">Client ID :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.clientID }}" readonly="readonly" style="width: 110%">
                    </div>
                    <div class="Flex-Child LeftColumn">Keep alive :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.keepalive }}" readonly="readonly">
                    </div>
                    <div class="Flex-Child LeftColumn">Subscriptions :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.subscriptions }}" readonly="readonly" style="width: 110%">
                    </div>
                    <div class="Flex-Child LeftColumn">Delivered msgs :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.delivered_msgs }}" readonly="readonly">
                    </div>
                    <div class="Flex-Child LeftColumn">Enqueued msgs :</div>
                    <div class="Flex-Child RightColumn">
                        <input class="Text" type="text" value="{{ value.enqueued_msgs }}" readonly="readonly" style="width: 110%">
                    </div>
                    <div class="Flex-Child LeftColumn">Clean start :</div>
                    <div class="Flex-Child RightColumn">
                        {% if value.clean_start == "True" %}
                            <input class="Checkbox" type="checkbox" checked disabled/>
                        {% else %}
                            <input class="Checkbox" type="checkbox" disabled/>
                        {% endif %}
                    </div>
                </div>
            </div>

        </div>
        {% endfor %}
        -->
    </div>
{% endblock %}

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