{% extends "base.html" %}

{% block title %}Settings{% endblock %}

{% block styles %}
    {{ super() }}
    <link href="{{ url_for('static', filename='styles/settings.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock %}

{% block scripts %}
    {{super()}}
{% endblock %}

{% block station_state %}
    <h3 id='station-state' style="display: inline"> - Uninitialized - </h3>
{% endblock %}

{% block content %}
    <div class="vertical_centered_div">
        <h3 class="columns_section">System Settings</h3>
    </div>

    <div id="init_feedback" class="columns_section" hidden="true">
        <h4>Page unavailable: System not initialized.</h4>
    </div>

    <div id="page_content" hidden="true">

        <br>
        <div class="center">
            <div class="form-check form-switch">
                <input class="form-check-input red-switch" type="checkbox" disabled="true" id="volatile" onclick="toggle_permanent()">
                <label class="form-check-label" for="volatile">Permanent Settings</label>
            </div>
        </div> 

        <h3>Home Page</h3>

        <div class="center" id="uninitialized_message">
            <h3>Initialize Hardware to Manage Settings</h3>
        </div>

        <div class="column_container">

            <div class="left_div">
                <div id="pressure_input_1_div" class="pressure_controller_div">
                    <span>Priming Pressure Board #1 - </span><span id="pressure_input_1_value">0 PSI</span>
                    <div class="spaced_out">
                        <button onclick="load_priming('pressure_input_1_slider', 0)" type="button" disabled="true" id="prime_btn1" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Load #1</button>
                        <input type="range" min="0" max="20" value="0" id="pressure_input_1_slider" disabled="true" class="pressure_slider">
                    </div>
                </div>

                <div id="pressure_input_3_div" class="pressure_controller_div">
                    <span>Priming Pressure Board #3 - </span><span id="pressure_input_3_value">0 mbar</span>
                    <div class="spaced_out">
                        <button onclick="load_priming('pressure_input_3_slider', 2)" type="button" disabled="true" id="prime_btn3" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Load #3</button>
                        <input type="range" min="0" max="345" value="0" id="pressure_input_3_slider" disabled="true" class="pressure_slider">
                    </div>
                </div>
            </div>

            <div class="separator"></div>

            <div class="right_div">
                <div id="pressure_input_2_div" class="pressure_controller_div">
                    <span>Priming Pressure Board #2 - </span><span id="pressure_input_2_value">0 PSI</span>
                    <div class="spaced_out">
                        <button onclick="load_priming('pressure_input_2_slider', 1)" type="button" disabled="true" id="prime_btn2" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Load #2</button>
                        <input type="range" min="0" max="20" value="0" id="pressure_input_2_slider" disabled="true" class="pressure_slider">
                    </div>
                </div>
            
                <div id="pressure_input_4_div" class="pressure_controller_div">
                    <span>Priming Pressure Board #4 - </span><span id="pressure_input_4_value">0 mbar</span>
                    <div class="spaced_out">
                        <button onclick="load_priming('pressure_input_4_slider', 3)" type="button" disabled="true" id="prime_btn4" title="Keep button pressed to start priming, release button to stop" class="btn btn-outline-info priming_btn">Load #4</button>
                        <input type="range" min="0" max="25" value="0" id="pressure_input_4_slider" disabled="true" class="pressure_slider">
                    </div>
                </div>
            </div>

        </div>


        <div class="main_section_div underlined"> 
            <div class="numbered_settings">
                <div class="middle_settings_left">
                    <div class="input-group mb-1">
                        <input type="number" min="0" pattern="[0-9]*" disabled="true" class="short_input" id="plot_refresh_rate" placeholder="Refresh Rate for Plots (Hz)" aria-label="Example text with button addon" aria-describedby="button-addon1">
                        <button class="btn btn-outline-success" disabled="true" type="button" id="button-addon1" onclick="load_setting('plot_refresh_rate', 'plotError')" >Load</button>    
                    </div>
                    <div id="plotError" style="color: red;"></div>
            
                    <!-- Adjust the event in case of input -->
                    <div class="input-group mb-1">
                        <input type="number" min="0" pattern="[0-9]*" disabled="true" class="short_input" id="execution_progress_bar_refresh_rate" placeholder="Progress Bar Refresh Rate (Hz)" aria-label="Example text with button addon" aria-describedby="button-addon1">
                        <button class="btn btn-outline-success" disabled="true" type="button" id="button-addon2" onclick="load_setting('execution_progress_bar_refresh_rate', 'progressError')" >Load</button>    
                    </div>
                    <div id="progressError" style="color: red;"></div>
                </div>
            
                <div class="middle_settings_right">
                    <!-- Adjust the event in case of input -->
                    <div class="input-group mb-1">
                        <input type="number" min="0" pattern="[0-9]*" disabled="true" class="short_input" id="init_pressure_sampling_frequency" placeholder="Pressure Sampling Frequency (Hz)" aria-label="Example text with button addon" aria-describedby="button-addon1">
                        <button class="btn btn-outline-success" disabled="true" type="button" id="button-addon3" onclick="load_setting('init_pressure_sampling_frequency', 'pressureError')" >Load</button>    
                    </div>
                    <div id="pressureError" style="color: red;"></div>
            
                    <!-- Adjust the event in case of input -->
                    <div class="input-group mb-1">
                        <input type="number" min="0" pattern="[0-9]*" disabled="true" class="short_input" id="init_flowrate_sampling_frequency" placeholder="Flowrate Sampling Frequency (Hz)" aria-label="Example text with button addon" aria-describedby="button-addon1">
                        <button class="btn btn-outline-success" disabled="true" type="button" id="button-addon4" onclick="load_setting('init_flowrate_sampling_frequency', 'samplingError')" >Load</button>    
                    </div>
                    <div id="samplingError" style="color: red;"></div>
                </div>

                <div class="separator"></div> 

                <!-- Adjust the event in case of input -->
                <!-- THIS ONE IS A STRING. Make it a drop down menu -->
                <div class="sampling_dropdown">
                    <select id="scripts_dropdown" disabled="true" class="form-select">
                        <option value="default" selected>- Flowrate Sampling Mode -</option>
                        <option value="0">AIR_1</option>
                        <option value="1">AIR_2</option>
                        <option value="2">AIR_12</option>
                        <option value="3">LIQ_1</option>
                        <option value="4">LIQ_2</option>
                        <option value="5">LIQ_3</option>
                        <option value="6">LIQ_4</option>
                        <option value="7">LIQ_12</option>
                        <option value="8">LIQ_34</option>
                        <option value="9">LIQ_1234</option>
                        <option value="10">AIR_LIQ_1</option>
                        <option value="11">AIR_LIQ_2</option>
                        <option value="12">AIR_LIQ_12</option>
                        <option value="13">AIR_12_LIQ_1234</option>
                    </select>   
                    <div id="dropdownError" style="color: red; margin-top: 5px;"></div>
                </div>

                <div class="upload_dropdown_choice">
                    <button class="btn btn-outline-success" disabled="true" id="upload_script_btn">Upload</button>
                </div>            
            </div>       
        </div>
        <br>

        <h3>Flow Control Page</h3>

        <script src="{{ url_for('static', filename='lib/socket.io.min.js') }}"></script>
        <script src="{{ url_for('static', filename='settings.js') }}"></script>
    </div>
{% endblock %}