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

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

{% block Application_JS_File %}
<script src="{% static 'js/RuleEngine.h.js' %}"></script>
<script src="{% static 'js/RuleEngine.jpp.js' %}"></script>
<script src="{% static 'js/RuleEngine.Click.js' %}"></script>
<script src="{% static 'js/RuleEngine.Change.js' %}"></script>
<script>
    var RuleEngineConfig = {
        SettingsIcon: "{% static 'images/settings.png' %}",
        RemoveIcon: "{% static 'images/remove.png' %}"
    };
    document.addEventListener("DOMContentLoaded", function() {
        RuleEngine.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.RuleEngine.RuleEngineTitle }}</div>
    <div><input id="AddRule" type="button" value="{{ lang.RuleEngine.AddRuleButton }}" onclick="AddRuleButton_click()"></div>
    <div class="PopupBoxRow"></div>
    <table id="Table_RuleEngine" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><span>{{ lang.RuleEngine.Permission }}</span></th>
                <th><span>{{ lang.RuleEngine.User }}</span></th>
                <th><span>{{ lang.RuleEngine.Operation }}</span></th>
                <th><span>Topic</span></th>
                <th></th>
            </tr>
        </thead>
        <tbody id="TableBody_RuleEngine"></tbody>
    </table>

    <!--Popup Box樣板，由JavaScript依資料動態複製使用-->
    <div class="DynamicPopupBoxRow" style="display: none;">
        <div class="PopupBox-Container">
        <div class="PopupBox">
            <div class="PopupIndex" style="display: none">0</div>
            <!-- 權限 -->
            <div class="Row">
                <div class="LeftColumn">{{ lang.RuleEngine.Permission }}</div>
                <div class="RightColumn">
                    <select id="RulePermission" class="Select">
                        <option value="deny">Deny</option>
                        <option value="allow">Allow</option>
                    </select>
                </div>
            </div>
            <!-- 對象 -->
            <div class="Row">
                <div class="LeftColumn">{{ lang.RuleEngine.User }}</div>
                <div class="RightColumn">
                    <select id="RuleUser" class="Select" onchange="RuleUser_change(this)">
                        <option value="ipaddr">IP</option>
                        <option value="clientid">Client ID</option>
                        <option value="user">User</option>
                    </select>
                </div>
            </div>
            <!-- 詳細設定對象 -->
            <div class="Row">
                <div class="LeftColumn"></div>
                <div class="RightColumn">
                     <!--IP-->
                    <input class="Text" type="text" style="float: right;width: 100%" value="">
                    <!--Client ID-->
                    <input class="Text" type="text" value="" style="display: none">
                    <!--User-->
                    <select class="Select" style="display: none"></select>
                </div>
            </div>
            <!-- 操作 -->
            <div class="Row">
                <div class="LeftColumn">{{ lang.RuleEngine.Operation }}</div>
                <div class="RightColumn">
                    <select id="RuleOperation" class="Select">
                        <option value="publish">Publish</option>
                        <option value="subscribe">Subscribe</option>
                        <option value="publish/subscribe">Publish/Subscribe</option>
                    </select>
                </div>
            </div>
            <!-- Topic -->
            <div class="Row">
                <div class="LeftColumn">Topic</div>
                <div class="RightColumn">
                    <textarea class="Textarea"></textarea>
                </div>
            </div>
            <button onclick="ConfirmButton_click(this)">{{ lang.RuleEngine.ConfirmButton }}</button>
            <button onclick="CancelButton_click(this)">{{ lang.RuleEngine.CancelButton }}</button>
        </div>
        </div>
    </div>

{% endblock %}

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