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

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

{% block Application_JS_File %}
<script src="{% static 'js/MQTTDataLoggerSecondPage.Click.js' %}"></script>
<script src="{% static 'js/MQTTDataLoggerSecondPage.Blur.js' %}"></script>
<script src="{% static 'js/MQTTDataLoggerSecondPage.h.js' %}"></script>
<script src="{% static 'js/MQTTDataLoggerSecondPage.jpp.js' %}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        MQTTDataLoggerSecondPage.prototype._Startup_("{{ form|safe }}", "{{ ftpserver|safe }}");
    });
</script>
{% endblock %}

<!-- 上方內容 -->
{% block Main_Top-General %}
{% endblock %}

<!-- 當前網頁路徑 -->
{% block Main_Top-Path %}
{% endblock %}

<!-- 左方列表-->
{% block Main_Left-List %}
	{% include 'LeftList_LoggerSetting.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<div class="FormTitle">MQTT Data Logger</div>

    <!--內容設定-->
    <div class="Form" style="width:100%">
        <!--Enable-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Enable</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Checkbox" type="checkbox"/>
            </div>
        </div>
        <!--JSON Parser Model-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Parser Model</div>
            <div class="RightColumn" style="width:70%">
                 <select id="ParserModel" class="Select" style="float: left;" onblur="main_CheckParserModel_blur(this)">
                    <option value="ANA">ANA</option>
                    <option value="GLR">GLR</option>
                    <option value="Bmag">Bmag</option>
                </select>
                <div class="Message" style="float: left;">This field is required</div>
            </div>
        </div>
        <!--Nick Name-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Nickname</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="" style="float: left;" onblur="main_CheckNickname_blur(this)">
                 <div class="Message" style="float: left;">This field is required</div>
            </div>
        </div>
        <!--Description-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Description</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="">
            </div>
        </div>
        <!--csv File name-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">CSV File name</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" value="" style="float: left;" onblur="main_CheckCsvFileName_blur(this)">
                 <div style="float: left; padding-left: 10px; padding-top: 5px">yyyy-MM-dd.csv</div>
                 <div class="Message" style="float: left;">This field is required</div>
            </div>
        </div>
        <!--Datetime Format-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Datetime Format</div>
            <div class="RightColumn" style="width:70%">
                <select id="DatetimeFormat" class="Select">
                    <option value="yyyy-MM-dd@HH-mm-ss">yyyy-MM-dd HH-mm-ss</option>
                    <option value="MM-dd-yyyy@HH-mm-ss">MM-dd-yyyy HH-mm-ss</option>
                    <option value="dd-MM-yyyy@HH-mm-ss">dd-MM-yyyy HH-mm-ss</option>
                    <option value="yyyy-MM-dd@HH-mm">yyyy-MM-dd HH-mm</option>
                    <option value="MM-dd-yyyy@HH-mm">MM-dd-yyyy HH-mm</option>
                    <option value="dd-MM-yyyy@HH-mm">dd-MM-yyyy HH-mm</option>
                </select>
            </div>
        </div>
        <!--Topic-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">Topic</div>
            <div class="RightColumn" style="width:70%">
                 <input class="Text" type="text" style="width:100%; float: left;" value="" onblur="main_CheckTopic_blur(this)">
                 <div class="Message" style="float: left;">This field is required</div>
            </div>
        </div>
         <!--FTP server-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;">FTP server</div>
            <div class="RightColumn" style="width:70%">
                <select id="FTPserver" class="Select" style="float: left;" onblur="main_CheckFTPserver_blur(this)">
                </select>
                <div class="Message" style="float: left;">This field is required</div>
            </div>
        </div>
        <!--儲存按鈕-->
        <div class="Row">
            <div class="LeftColumn" style="height:50px;"></div>
            <div class="RightColumn" style="width:70%">
                <button onclick="ConfirmButton_click(this)" style="float: left;">Confirm</button>
                <button onclick="CancelButton_click(this)" style="float: left;">Cancel</button>
                <div class="Message">Please check format</div>
            </div>
        </div>
    </div>

    <!--動態新增Row-->
    <div class="DynamicRow" style="display: none;">
        <option value=""></option>
    </div>
{% endblock %}

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