<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Fintic - Web Control Panel</title>
    <link rel="icon" type="image/png" href="/static/images/favicon.png">

    <!-- Bootstrap 5 CDN Links -->
      <script
      src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"
    ></script>

    <link
      href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}"
      rel="stylesheet"
    />

    <!-- Fontawesome - for icons -->

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css"
      integrity="sha512-kJ30H6g4NGhWopgdseRb8wTsyllFUYIx3hiUwmGAkgA9B/JbzUBDQVr2VVlWGde6sdBVOG7oU8AL35ORDuMm8g=="
      crossorigin="anonymous"
    />

    <!-- CSS Stylesheet linking -->

<!--     <link href="{{ url_for('static', filename='style.css') }}" type="text/css" rel="stylesheet" />   ALWAYS CHANGE VERSIONING WHENEVER CHANGES ARE MADE TO AVOID BAD CACHING -->
    <link rel="stylesheet" type="text/css" href="../static/style.css?ver=1.3.4"/>

  </head>



  <body>

    <div id="yooo" style="background-color:black; position:fixed; height:100%; width:100%; z-index:10; display:none;">
      <p style="color:white; font-size:40px; text-align: center; margin-top: 20%;" class="asdasd">Ticker is shutting down / rebooting / resetting. Refresh web page when ticker is booted up again.</p>
    </div>
    
    <div class="container">

      <!-- Top logo bar -->



      <!-- Top logo bar -->

      <nav class="navbar navbar-light justify-content-end" style="border-bottom:1px solid white">

        <div class="container">

          <a class="navbar-brand" href="#">

          <img src="{{ url_for('static', filename='images/logo_white.png') }}" class="logo" alt="logo" />

          </a>

        

         <div class="hostname-text">

          <p>
            Hostname: <span id="host-name">{{ general_settings.hostname }}</span>.local:1024<br>
            Scheduled Shutdown: <span id="host-name">{{ scheduler_settings.shutdown.hour }}:{{scheduler_settings.shutdown.minute}} {{scheduler_settings.timezone}}</span>
            <span id="host-name">Enabled:{{scheduler_settings.shutdown.enabled}}</span><br>
            Scheduled Reboot: <span id="host-name">{{ scheduler_settings.reboot.hour }}:{{scheduler_settings.reboot.minute}} {{scheduler_settings.timezone}}</span>
            <span id="host-name">Enabled:{{scheduler_settings.reboot.enabled}}</span><br>
            Scheduled Brightness:  {% if scheduler_settings.brightness1.enabled or scheduler_settings.brightness2.enabled
            or scheduler_settings.brightness3.enabled or scheduler_settings.brightness4.enabled %}<span id="host-name">Enabled</span>
            {% else %}<span id="host-name">Disabled</span>{% endif %}
          </p>

        </div>

        <div id="outer-div" class="main-div main-div3">

          <button id="update-btn" class="btn update-btn" onclick="showDiv()"> 
            {% if system_info.update_available %}
              Update available!
            {%else%}
              Up to date
            {%endif%}
          </button>

        </div>

        </div>
<p class="text-white" id="version-text">Version 1.3.4</p>
<p class="text-white" id="version-text"><a href="https://docs.google.com/document/d/1TzvukZv_0Pd3TUM6Xe2wEkymn9uIT2qXUBFnMCQwp5g/edit?usp=sharing" target="_blank" id="footerlinks">Changelog</a></p>
      </nav>

      <!-- End logo bar -->



      <!-- General Ticker Heading -->

      <div class="row">

        <div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%">

          <h3 class="text-white" id="general">

            General Ticker Settings

          </h3>

        </div>

      </div>

      <!-- End General Ticker Heading -->



      <!-- Button List -->

      <div class="row" style="justify-content:center">

        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="start-btn" class="btn btn-success">Start Display</a>

        </div>

        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="stop-btn" class="btn btn-info">Stop Display</a>

        </div>

        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="restart-btn" class="btn btn-dark">Restart Display</a>

        </div>

        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="screensaver-btn" class="btn btn-warning">Screen Saver</a>

        </div>

        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="shutdown-btn" class="btn btn-danger">Shut Down</a>

        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">

          <a id="reset-btn" class="btn btn-danger">Reset User Settings</a>

        </div>

      </div>

      <!-- End Button List -->

<!-- Updating message -->

    <div id="update-message" style="display:none;width:100%;height:100%;"><p id="update-p">Updating, please do not shutdown the ticker or disconnect from Wi-Fi. Refresh the web panel once the ticker is rebooted!</p></div>

    <div id="wifi-message" style="display:none"><p id="wifi-p">Joining Wi-Fi, please restart the ticker.</p></div>
      
     

      <!-- Ticker Form -->

      <!-- First Row -->

      <div class="ticker-form" style="padding-top:3%; padding-bottom:2%;border-bottom:1px solid white">

      <div class="row g-3 align-items-center" >

          <div class="col-lg-6 col-md-6 col-sm-12 d-block">

            <div class="row g-3 align-items-center">

              <!-- Brightness Input --> 

              <div class="col-auto">

                <label for="brightness-inputZ" class="col-form-label">Brightness (1 - 10):</label>

              </div><br /><br />

              <div class="col-auto">

                <input

                  type="text"

                  id="brightness-input"

                  class="form-control brightness-text"

                  aria-describedby="TextHelpInline"

                  value={{ general_settings.brightness }}

                />

              </div>

              <div class="col-auto">

                <button class="btn set-btn" id="brightness-btn">Set</button>

              </div>

            </div>

          </div>

        <!-- End Brightness Input -->

        <div class="col-lg-6 col-md-6 col-sm-12 d-block">

            <div class="row g-3 align-items-center">

              <div class="col-auto">

                <label for="inputAnimationZ" class="col-form-label">Screensaver animation:

                </label>

              </div><br/><br/>

              <div class="col-auto-screensaver">

                <select id="inputAnimation" class="form-select">

                  <option>Pulsating Colors</option>

                  <option>Rotating Square</option>

                  <option>Pulsating brightness</option>

                  <option>Grayscale Block</option>

                  <option>Abelian Sandpile Model</option>

                  <option>Conway's Game of Life</option>

                  <option>Evolution of Color</option>

                  <option>Volume Bars</option>

                  <option>Sleep</option>

                </select>

              </div>

              <div class="col-auto" id="input-animation-btn">

                <button class="btn set-btn">Set</button>

              </div>

            </div>

          </div>

        </div>

      <!-- End First Row -->



      <!-- Second Row -->

      <div class="row g-3 align-items-center" style="padding-top:3%">

        <div class="col-lg-6 col-md-6 col-sm-12 d-block">

          <div class="row g-3 align-items-center">

            <!-- Host Name Input --> 

            <div class="col-auto">

              <label for="host-name-inputZ" class="col-form-label">Change host name:</label>

            </div><br/><br/>

              <div class="col-auto">

                <input

                  type="text"

                  id="host-name-input"

                  class="form-control"

                  aria-describedby="TextHelpInline"

                  value={{ general_settings.hostname }}

                />

              </div>

            <div class="col-auto">  

              <button class="btn set-btn" id="host-name-btn">Set</button>

            </div>

          </div>

        </div>

        <!-- End Brightness Input -->

        <div class="col-lg-6 col-md-6 col-sm-12 d-block">

          <div class="row g-3 align-items-center"> 

            <div class="col-auto">

              <label for="inputDisplayFormatZ" class="col-form-label">Ticker Display Format:

              </label>        

            </div><br/><br/>

          <div class="col-auto-displayformat">

            <select id="inputDisplayFormat" class="form-select">
        
                  <option {%if feature_settings2 == 'Standard' %} selected {% endif %}>Standard Scrolling</option>

                  <option {%if feature_settings2 == 'Professional' %} selected {% endif %}>Professional Two Rows</option>            

                </select>

          </div>   

          <div class="col-auto" id="input-animation-btn">  

            <button class="btn set-btn" id="dispformat-btn">Set</button>

          </div>

          </div>

        </div>

      </div>

    </div>

      <!-- End Second Row -->      

      <!-- End Ticker Form -->



          <!-- Features to Display Heading-->

    <div class="row">

      <div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%; width: 50%;">
        <h3 class="text-white">Features to Display</h3>
        <p>
          Selected Format:
          <span class="font-6" id="selected-display-text"></span>
        </p>
      </div>   

        <div class="col-lg-2 col-md-2 col-sm-2" style="width:50%;margin-top: 3%;padding-left:20%;">
          <a id="scheduler-btn" class="btn btn-scheduler" onclick="showScheduler()">Scheduler Settings</a>
        </div>

    </div><br>


    <div id="scheduler-div" style="display:none">
      <div id="scheduler-top">
        <h3 id="scheduler-p">Scheduler Settings</h3>
        <button id="scheduler-close-btn" onclick="closeScheduler()">Close</button>
        <div id="inside-scheduler-div">
          <p id="shutdowns-p">Shutdowns (Daily):</p>
            <div class="col-auto">
              Hour
              <select class="form-select hour-select" id="shutdown-hour-select">
                <option {%if scheduler_settings.shutdown.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.shutdown.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.shutdown.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.shutdown.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.shutdown.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.shutdown.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.shutdown.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.shutdown.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.shutdown.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.shutdown.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.shutdown.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.shutdown.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.shutdown.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.shutdown.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.shutdown.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.shutdown.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.shutdown.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.shutdown.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.shutdown.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.shutdown.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.shutdown.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.shutdown.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.shutdown.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.shutdown.hour == '23' %} selected {% endif %}>23</option>
              </select>
              Minute
              <select class="form-select minute-select" id="shutdown-minute-select">
                <option {%if scheduler_settings.shutdown.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.shutdown.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.shutdown.minute == '02'%} selected {% endif %}>02</option>
                <option {%if scheduler_settings.shutdown.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.shutdown.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.shutdown.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.shutdown.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.shutdown.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.shutdown.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.shutdown.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.shutdown.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.shutdown.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.shutdown.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.shutdown.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.shutdown.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.shutdown.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.shutdown.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.shutdown.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.shutdown.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.shutdown.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.shutdown.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.shutdown.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.shutdown.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.shutdown.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.shutdown.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.shutdown.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.shutdown.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.shutdown.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.shutdown.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.shutdown.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.shutdown.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.shutdown.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.shutdown.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.shutdown.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.shutdown.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.shutdown.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.shutdown.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.shutdown.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.shutdown.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.shutdown.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.shutdown.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.shutdown.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.shutdown.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.shutdown.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.shutdown.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.shutdown.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.shutdown.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.shutdown.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.shutdown.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.shutdown.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.shutdown.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.shutdown.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.shutdown.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.shutdown.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.shutdown.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.shutdown.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.shutdown.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.shutdown.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.shutdown.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.shutdown.minute == '59' %} selected {% endif %}>59</option>
              </select>
              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="shutdown-enabled"
              {% if scheduler_settings.shutdown.enabled %} checked {%endif%}/>
            </div>

          <p id="reboots-p">Reboots (Daily):</p>
            <div class="col-auto">
              Hour
              <select class="form-select hour-select" id="reboot-hour-select">
                <option {%if scheduler_settings.reboot.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.reboot.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.reboot.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.reboot.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.reboot.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.reboot.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.reboot.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.reboot.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.reboot.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.reboot.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.reboot.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.reboot.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.reboot.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.reboot.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.reboot.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.reboot.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.reboot.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.reboot.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.reboot.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.reboot.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.reboot.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.reboot.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.reboot.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.reboot.hour == '23' %} selected {% endif %}>23</option>
              </select>
              Minute
              <select class="form-select minute-select" id="reboot-minute-select">
                <option {%if scheduler_settings.reboot.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.reboot.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.reboot.minute == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.reboot.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.reboot.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.reboot.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.reboot.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.reboot.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.reboot.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.reboot.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.reboot.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.reboot.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.reboot.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.reboot.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.reboot.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.reboot.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.reboot.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.reboot.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.reboot.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.reboot.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.reboot.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.reboot.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.reboot.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.reboot.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.reboot.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.reboot.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.reboot.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.reboot.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.reboot.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.reboot.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.reboot.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.reboot.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.reboot.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.reboot.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.reboot.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.reboot.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.reboot.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.reboot.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.reboot.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.reboot.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.reboot.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.reboot.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.reboot.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.reboot.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.reboot.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.reboot.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.reboot.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.reboot.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.reboot.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.reboot.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.reboot.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.reboot.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.reboot.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.reboot.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.reboot.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.reboot.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.reboot.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.reboot.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.reboot.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.reboot.minute == '59' %} selected {% endif %}>59</option>
              </select>
              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="reboot-enabled"
              {% if scheduler_settings.reboot.enabled %} checked {%endif%}/>
            </div>


          <p id="brightness-p">Brightness 1 (Daily):</p>
            <div class="col-auto">
              H
              <select class="form-select b-minute-select" id="brightness1-hour1-select">
                <option {%if scheduler_settings.brightness1.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness1.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness1.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness1.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness1.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness1.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness1.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness1.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness1.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness1.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness1.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness1.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness1.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness1.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness1.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness1.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness1.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness1.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness1.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness1.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness1.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness1.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness1.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness1.hour == '23' %} selected {% endif %}>23</option>
              </select>
              M
              <select class="form-select b-minute-select" id="brightness1-minute1-select">
                <option {%if scheduler_settings.brightness1.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness1.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness1.minute == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness1.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness1.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness1.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness1.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness1.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness1.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness1.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness1.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness1.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness1.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness1.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness1.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness1.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness1.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness1.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness1.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness1.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness1.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness1.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness1.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness1.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.brightness1.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.brightness1.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.brightness1.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.brightness1.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.brightness1.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.brightness1.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.brightness1.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.brightness1.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.brightness1.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.brightness1.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.brightness1.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.brightness1.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.brightness1.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.brightness1.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.brightness1.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.brightness1.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.brightness1.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.brightness1.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.brightness1.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.brightness1.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.brightness1.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.brightness1.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.brightness1.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.brightness1.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.brightness1.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.brightness1.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.brightness1.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.brightness1.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.brightness1.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.brightness1.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.brightness1.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.brightness1.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.brightness1.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.brightness1.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.brightness1.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.brightness1.minute == '59' %} selected {% endif %}>59</option>
              </select>
              Bright
              <select class="form-select b-minute-select" id="brightness1-bright-select">
                <option {%if scheduler_settings.brightness1.bright == '1' %} selected {% endif %}>1</option>
                <option {%if scheduler_settings.brightness1.bright == '2' %} selected {% endif %}>2</option>
                <option {%if scheduler_settings.brightness1.bright == '3' %} selected {% endif %}>3</option>
                <option {%if scheduler_settings.brightness1.bright == '4' %} selected {% endif %}>4</option>
                <option {%if scheduler_settings.brightness1.bright == '5' %} selected {% endif %}>5</option>
                <option {%if scheduler_settings.brightness1.bright == '6' %} selected {% endif %}>6</option>
                <option {%if scheduler_settings.brightness1.bright == '7' %} selected {% endif %}>7</option>
                <option {%if scheduler_settings.brightness1.bright == '8' %} selected {% endif %}>8</option>
                <option {%if scheduler_settings.brightness1.bright == '9' %} selected {% endif %}>9</option>
                <option {%if scheduler_settings.brightness1.bright == '10' %} selected {% endif %}>10</option>

              </select>

              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="brightness1-enabled"
              {% if scheduler_settings.brightness1.enabled %} checked {%endif%}/>
            </div>


          <p id="brightness-p">Brightness 2 (Daily):</p>
            <div class="col-auto">
              H
              <select class="form-select b-minute-select" id="brightness2-hour1-select">
                <option {%if scheduler_settings.brightness2.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness2.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness2.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness2.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness2.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness2.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness2.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness2.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness2.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness2.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness2.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness2.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness2.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness2.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness2.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness2.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness2.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness2.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness2.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness2.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness2.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness2.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness2.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness2.hour == '23' %} selected {% endif %}>23</option>
              </select>
              M
              <select class="form-select b-minute-select" id="brightness2-minute1-select">
                <option {%if scheduler_settings.brightness2.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness2.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness2.minute == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness2.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness2.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness2.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness2.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness2.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness2.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness2.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness2.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness2.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness2.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness2.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness2.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness2.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness2.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness2.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness2.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness2.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness2.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness2.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness2.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness2.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.brightness2.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.brightness2.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.brightness2.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.brightness2.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.brightness2.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.brightness2.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.brightness2.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.brightness2.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.brightness2.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.brightness2.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.brightness2.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.brightness2.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.brightness2.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.brightness2.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.brightness2.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.brightness2.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.brightness2.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.brightness2.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.brightness2.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.brightness2.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.brightness2.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.brightness2.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.brightness2.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.brightness2.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.brightness2.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.brightness2.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.brightness2.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.brightness2.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.brightness2.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.brightness2.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.brightness2.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.brightness2.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.brightness2.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.brightness2.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.brightness2.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.brightness2.minute == '59' %} selected {% endif %}>59</option>
              </select>
              Bright
              <select class="form-select b-minute-select" id="brightness2-bright-select">
                <option {%if scheduler_settings.brightness2.bright == '1' %} selected {% endif %}>1</option>
                <option {%if scheduler_settings.brightness2.bright == '2' %} selected {% endif %}>2</option>
                <option {%if scheduler_settings.brightness2.bright == '3' %} selected {% endif %}>3</option>
                <option {%if scheduler_settings.brightness2.bright == '4' %} selected {% endif %}>4</option>
                <option {%if scheduler_settings.brightness2.bright == '5' %} selected {% endif %}>5</option>
                <option {%if scheduler_settings.brightness2.bright == '6' %} selected {% endif %}>6</option>
                <option {%if scheduler_settings.brightness2.bright == '7' %} selected {% endif %}>7</option>
                <option {%if scheduler_settings.brightness2.bright == '8' %} selected {% endif %}>8</option>
                <option {%if scheduler_settings.brightness2.bright == '9' %} selected {% endif %}>9</option>
                <option {%if scheduler_settings.brightness2.bright == '10' %} selected {% endif %}>10</option>

              </select>

              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="brightness2-enabled"
              {% if scheduler_settings.brightness2.enabled %} checked {%endif%}/>
            </div>


          <p id="brightness-p">Brightness 3 (Daily):</p>
            <div class="col-auto">
              H
              <select class="form-select b-minute-select" id="brightness3-hour1-select">
                <option {%if scheduler_settings.brightness3.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness3.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness3.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness3.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness3.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness3.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness3.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness3.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness3.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness3.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness3.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness3.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness3.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness3.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness3.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness3.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness3.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness3.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness3.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness3.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness3.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness3.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness3.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness3.hour == '23' %} selected {% endif %}>23</option>
              </select>
              M
              <select class="form-select b-minute-select" id="brightness3-minute1-select">
                <option {%if scheduler_settings.brightness3.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness3.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness3.minute == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness3.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness3.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness3.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness3.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness3.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness3.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness3.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness3.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness3.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness3.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness3.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness3.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness3.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness3.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness3.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness3.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness3.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness3.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness3.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness3.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness3.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.brightness3.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.brightness3.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.brightness3.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.brightness3.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.brightness3.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.brightness3.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.brightness3.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.brightness3.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.brightness3.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.brightness3.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.brightness3.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.brightness3.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.brightness3.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.brightness3.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.brightness3.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.brightness3.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.brightness3.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.brightness3.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.brightness3.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.brightness3.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.brightness3.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.brightness3.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.brightness3.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.brightness3.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.brightness3.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.brightness3.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.brightness3.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.brightness3.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.brightness3.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.brightness3.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.brightness3.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.brightness3.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.brightness3.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.brightness3.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.brightness3.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.brightness3.minute == '59' %} selected {% endif %}>59</option>
              </select>
              Bright
              <select class="form-select b-minute-select" id="brightness3-bright-select">
                <option {%if scheduler_settings.brightness3.bright == '1' %} selected {% endif %}>1</option>
                <option {%if scheduler_settings.brightness3.bright == '2' %} selected {% endif %}>2</option>
                <option {%if scheduler_settings.brightness3.bright == '3' %} selected {% endif %}>3</option>
                <option {%if scheduler_settings.brightness3.bright == '4' %} selected {% endif %}>4</option>
                <option {%if scheduler_settings.brightness3.bright == '5' %} selected {% endif %}>5</option>
                <option {%if scheduler_settings.brightness3.bright == '6' %} selected {% endif %}>6</option>
                <option {%if scheduler_settings.brightness3.bright == '7' %} selected {% endif %}>7</option>
                <option {%if scheduler_settings.brightness3.bright == '8' %} selected {% endif %}>8</option>
                <option {%if scheduler_settings.brightness3.bright == '9' %} selected {% endif %}>9</option>
                <option {%if scheduler_settings.brightness3.bright == '10' %} selected {% endif %}>10</option>

              </select>

              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="brightness3-enabled"
              {% if scheduler_settings.brightness3.enabled %} checked {%endif%}/>
            </div>


          <p id="brightness-p">Brightness 4 (Daily):</p>
            <div class="col-auto">
              H
              <select class="form-select b-minute-select" id="brightness4-hour1-select">
                <option {%if scheduler_settings.brightness4.hour == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness4.hour == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness4.hour == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness4.hour == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness4.hour == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness4.hour == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness4.hour == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness4.hour == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness4.hour == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness4.hour == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness4.hour == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness4.hour == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness4.hour == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness4.hour == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness4.hour == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness4.hour == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness4.hour == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness4.hour == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness4.hour == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness4.hour == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness4.hour == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness4.hour == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness4.hour == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness4.hour == '23' %} selected {% endif %}>23</option>
              </select>
              M
              <select class="form-select b-minute-select" id="brightness4-minute1-select">
                <option {%if scheduler_settings.brightness4.minute == '00' %} selected {% endif %}>00</option>
                <option {%if scheduler_settings.brightness4.minute == '01' %} selected {% endif %}>01</option>
                <option {%if scheduler_settings.brightness4.minute == '02' %} selected {% endif %}>02</option>
                <option {%if scheduler_settings.brightness4.minute == '03' %} selected {% endif %}>03</option>
                <option {%if scheduler_settings.brightness4.minute == '04' %} selected {% endif %}>04</option>
                <option {%if scheduler_settings.brightness4.minute == '05' %} selected {% endif %}>05</option>
                <option {%if scheduler_settings.brightness4.minute == '06' %} selected {% endif %}>06</option>
                <option {%if scheduler_settings.brightness4.minute == '07' %} selected {% endif %}>07</option>
                <option {%if scheduler_settings.brightness4.minute == '08' %} selected {% endif %}>08</option>
                <option {%if scheduler_settings.brightness4.minute == '09' %} selected {% endif %}>09</option>
                <option {%if scheduler_settings.brightness4.minute == '10' %} selected {% endif %}>10</option>
                <option {%if scheduler_settings.brightness4.minute == '11' %} selected {% endif %}>11</option>
                <option {%if scheduler_settings.brightness4.minute == '12' %} selected {% endif %}>12</option>
                <option {%if scheduler_settings.brightness4.minute == '13' %} selected {% endif %}>13</option>
                <option {%if scheduler_settings.brightness4.minute == '14' %} selected {% endif %}>14</option>
                <option {%if scheduler_settings.brightness4.minute == '15' %} selected {% endif %}>15</option>
                <option {%if scheduler_settings.brightness4.minute == '16' %} selected {% endif %}>16</option>
                <option {%if scheduler_settings.brightness4.minute == '17' %} selected {% endif %}>17</option>
                <option {%if scheduler_settings.brightness4.minute == '18' %} selected {% endif %}>18</option>
                <option {%if scheduler_settings.brightness4.minute == '19' %} selected {% endif %}>19</option>
                <option {%if scheduler_settings.brightness4.minute == '20' %} selected {% endif %}>20</option>
                <option {%if scheduler_settings.brightness4.minute == '21' %} selected {% endif %}>21</option>
                <option {%if scheduler_settings.brightness4.minute == '22' %} selected {% endif %}>22</option>
                <option {%if scheduler_settings.brightness4.minute == '23' %} selected {% endif %}>23</option>
                <option {%if scheduler_settings.brightness4.minute == '24' %} selected {% endif %}>24</option>
                <option {%if scheduler_settings.brightness4.minute == '25' %} selected {% endif %}>25</option>
                <option {%if scheduler_settings.brightness4.minute == '26' %} selected {% endif %}>26</option>
                <option {%if scheduler_settings.brightness4.minute == '27' %} selected {% endif %}>27</option>
                <option {%if scheduler_settings.brightness4.minute == '28' %} selected {% endif %}>28</option>
                <option {%if scheduler_settings.brightness4.minute == '29' %} selected {% endif %}>29</option>
                <option {%if scheduler_settings.brightness4.minute == '30' %} selected {% endif %}>30</option>
                <option {%if scheduler_settings.brightness4.minute == '31' %} selected {% endif %}>31</option>
                <option {%if scheduler_settings.brightness4.minute == '32' %} selected {% endif %}>32</option>
                <option {%if scheduler_settings.brightness4.minute == '33' %} selected {% endif %}>33</option>
                <option {%if scheduler_settings.brightness4.minute == '34' %} selected {% endif %}>34</option>
                <option {%if scheduler_settings.brightness4.minute == '35' %} selected {% endif %}>35</option>
                <option {%if scheduler_settings.brightness4.minute == '36' %} selected {% endif %}>36</option>
                <option {%if scheduler_settings.brightness4.minute == '37' %} selected {% endif %}>37</option>
                <option {%if scheduler_settings.brightness4.minute == '38' %} selected {% endif %}>38</option>
                <option {%if scheduler_settings.brightness4.minute == '39' %} selected {% endif %}>39</option>
                <option {%if scheduler_settings.brightness4.minute == '40' %} selected {% endif %}>40</option>
                <option {%if scheduler_settings.brightness4.minute == '41' %} selected {% endif %}>41</option>
                <option {%if scheduler_settings.brightness4.minute == '42' %} selected {% endif %}>42</option>
                <option {%if scheduler_settings.brightness4.minute == '43' %} selected {% endif %}>43</option>
                <option {%if scheduler_settings.brightness4.minute == '44' %} selected {% endif %}>44</option>
                <option {%if scheduler_settings.brightness4.minute == '45' %} selected {% endif %}>45</option>
                <option {%if scheduler_settings.brightness4.minute == '46' %} selected {% endif %}>46</option>
                <option {%if scheduler_settings.brightness4.minute == '47' %} selected {% endif %}>47</option>
                <option {%if scheduler_settings.brightness4.minute == '48' %} selected {% endif %}>48</option>
                <option {%if scheduler_settings.brightness4.minute == '49' %} selected {% endif %}>49</option>
                <option {%if scheduler_settings.brightness4.minute == '50' %} selected {% endif %}>50</option>
                <option {%if scheduler_settings.brightness4.minute == '51' %} selected {% endif %}>51</option>
                <option {%if scheduler_settings.brightness4.minute == '52' %} selected {% endif %}>52</option>
                <option {%if scheduler_settings.brightness4.minute == '53' %} selected {% endif %}>53</option>
                <option {%if scheduler_settings.brightness4.minute == '54' %} selected {% endif %}>54</option>
                <option {%if scheduler_settings.brightness4.minute == '55' %} selected {% endif %}>55</option>
                <option {%if scheduler_settings.brightness4.minute == '56' %} selected {% endif %}>56</option>
                <option {%if scheduler_settings.brightness4.minute == '57' %} selected {% endif %}>57</option>
                <option {%if scheduler_settings.brightness4.minute == '58' %} selected {% endif %}>58</option>
                <option {%if scheduler_settings.brightness4.minute == '59' %} selected {% endif %}>59</option>
              </select>
              Bright
              <select class="form-select b-minute-select" id="brightness4-bright-select">
                <option {%if scheduler_settings.brightness4.bright == '1' %} selected {% endif %}>1</option>
                <option {%if scheduler_settings.brightness4.bright == '2' %} selected {% endif %}>2</option>
                <option {%if scheduler_settings.brightness4.bright == '3' %} selected {% endif %}>3</option>
                <option {%if scheduler_settings.brightness4.bright == '4' %} selected {% endif %}>4</option>
                <option {%if scheduler_settings.brightness4.bright == '5' %} selected {% endif %}>5</option>
                <option {%if scheduler_settings.brightness4.bright == '6' %} selected {% endif %}>6</option>
                <option {%if scheduler_settings.brightness4.bright == '7' %} selected {% endif %}>7</option>
                <option {%if scheduler_settings.brightness4.bright == '8' %} selected {% endif %}>8</option>
                <option {%if scheduler_settings.brightness4.bright == '9' %} selected {% endif %}>9</option>
                <option {%if scheduler_settings.brightness4.bright == '10' %} selected {% endif %}>10</option>

              </select>

              <label for="inputTransitionZ" class="col-form-label">Enable</label>
              <input class="scheduler-hour-select" type="checkbox" value="" id="brightness4-enabled"
              {% if scheduler_settings.brightness4.enabled %} checked {%endif%}/>
            </div>
          
          
          <p id="reboots-p">Timezone:</p>
            <div class="col-auto">
              <select class="form-select timezone-select" id="timezone-select">
                <option {%if scheduler_settings.timezone == 'US/Eastern' %} selected {% endif %}>US/Eastern</option>
                <option {%if scheduler_settings.timezone == 'US/Central' %} selected {% endif %}>US/Central</option>
                <option {%if scheduler_settings.timezone == 'US/Pacific' %} selected {% endif %}>US/Pacific</option>
                <option {%if scheduler_settings.timezone == 'GMT' %} selected {% endif %}>GMT</option>
                <option {%if scheduler_settings.timezone == 'CET' %} selected {% endif %}>CET</option>
                <option {%if scheduler_settings.timezone == 'GB' %} selected {% endif %}>GB</option>
                <option {%if scheduler_settings.timezone == 'NZ' %} selected {% endif %}>NZ</option>
                <option {%if scheduler_settings.timezone == 'Australia/ACT' %} selected {% endif %}>Australia/ACT</option>
                <option {%if scheduler_settings.timezone == 'Japan' %} selected {% endif %}>Japan</option>
                <option {%if scheduler_settings.timezone == 'Asia/Singapore' %} selected {% endif %}>Asia/Singapore</option>
                <option {%if scheduler_settings.timezone == 'Asia/Dubai' %} selected {% endif %}>Asia/Dubai</option>
              </select>
            </div>

          </div>
        <div class="col-lg-2 col-md-2 col-sm-2" style="display:block;margin: 0 auto;width: 30%;margin-top:8%;">
          <a id="save-scheduler-btn" class="btn btn-scheduler" onclick="saveSchedulerSettings()">Save Settings</a>
          <p align="center" style="display:none;color:red;" id="saved">Saved!</p>
        </div>
      </div>
    </div>


    <!-- Features List First Row -->

    <div class="row" style="border-bottom:1px solid white; padding:2%">
      
      <h4 id="top-row-text" style="display:none">Top row</h4>
      
      <!-- Available Features Column -->

      <div class="col-lg-4 col-md-4 col-sm-12 ">

        <div class="row">

        <h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>

        </div>

            <div class="row features-div">

              <ul

                id="available-features"

                class="display-features-list text-white">

               {% for f in not_displaying %}

                      <li>{{f}}</li>

                  {% endfor%}

              </ul>

            </div>

          </div>

      <!-- End Features Column -->

      <div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">

        <div class="icon-featuresdisplay">

        <i id="feature-to-display" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>

        <i id="display-to-feature" class="fa fa-chevron-left" aria-hidden="true"></i>           

        </div>

      </div>



      <!-- DIsplay Format Column -->

      <div class="col-lg-4 col-md-4 col-sm-12">

        <div class="row">

          <h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>

        </div>

            <div class="row features-div">

              <ul id="display-format" class="display-features-list text-white">

                  

                  

                  

                    {% for f in currently_displaying[0] %}

                            <li>{{f}}</li>

                      {% endfor%}

                

                </ul>

            </div>

          </div>

    <div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">

      <div class="icon-featuresdisplay">

        <i id="display-increase-btn" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>

        <i id="display-decrease-btn" class="fa fa-chevron-down" aria-hidden="true"></i>  

        <a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>

            </div>

          </div>

        </div>

    <!-- End Display Format -->

    

    <!-- End Features List ROw -->



    <!-- Features List Second Row -->

    <div id="second-row" class="row" style="border-bottom:1px solid white; padding:2%">

      <h4 id="bottom-row-text" style="display:none">Bottom row</h4>

      <!-- Available Features Column -->

          <div class="col-lg-4 col-md-4 col-sm-12">

          <div class="row">

            <h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>

          </div>

            <div class="row features-div">

              <ul

                id="available-features-2"

                class="display-features-list text-white">

              {%if professional%}

               {% for f in not_displaying2 %}

                      <li>{{f}}</li>

                  {% endfor%}


            	{%else%} 
                
                <li>Stocks</li>

                <li>Crypto</li>

                <li>Forex</li>
                
                <li>Commodities</li>
                
                <li>Indices</li>

                <li>Current Weather</li>

                <li>Daily Forecast</li>

                <li>News</li>

                <li>Custom Images</li>

                <li>Custom Messages</li>

                <li>Custom Gifs</li>

                <li>Sports (Upcoming Games)</li>

                <li>Sports (Live Games)</li>

                <li>Sports (Past Games)</li>

                <li>Sports (Team Stats)</li>
                
                <li>Movies</li>
                
                <li>IPO Calendar</li>

              {%endif%}
                
              </ul>

            </div>

          </div>



          <!-- End Features Column -->

      <div class="col-lg-2 col-md-2 col-sm-2 align-self-center">

        <div class="icons-list">

        <i id="feature-to-display-2" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>

        <i id="display-to-feature-2" class="fa fa-chevron-left" aria-hidden="true"></i>           

        </div>

      </div>



          <!-- DIsplay Format Column -->

          <div class="col-lg-4 col-md-4 col-sm-12">

          <div class="row">

            <h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>

          </div>            

            <div class="row features-div">

              <ul id="display-format-2" class="display-features-list text-white">

                {%if professional%}

                    {% for f in currently_displaying[1] %}

                            <li> {{f}} </li>

                      {% endfor%}

                  {%endif%}

              </ul>

            </div>

          </div>

    <div class="col-lg-2 col-md-2 col-sm-2 align-self-center">

      <div class="icons-list">

        <i id="display-increase-btn-2" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>

        <i id="display-decrease-btn-2" class="fa fa-chevron-down" aria-hidden="true"></i>  

        <a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>

      </div>

    </div>

    </div> 

    <!-- End Display Format -->

    <!-- End Features List ROw -->



    <!-- What to Display in Each Feature -->

    <div class="row" style="padding:2%">

      <h3 class="pt-3">What to Display in Each Feature</h3>

    </div>

      <div class="row justify-content-center">

          <div class="col-auto">

            <label for="dropZ" class="col-form-label">Feature:</label>

          </div>

          <div class="col-auto">

            <select id="drop" class="form-select">

              <option value="1">Stocks</option>

              <option value="2">Crypto</option>

              <option value="3">Forex</option>
              
              <option value="14">Commodities</option>
              
              <option value="15">Indices</option>

              <option value="4">Current Weather</option>

              <option value="5">Daily Forecast</option>

              <option value="6">News</option>

              <option value="7">Sports (Upcoming Games)</option>

              <option value="8">Sports (Past Games)</option>

              <option value="9">Sports (Live Games)</option>

              <option value="10">Sports (Team Stats)</option>

              <option value="11">Custom Images</option>

              <option value="12">Custom GIFs</option>

              <option value="13">Custom Messages</option>
              
              <option value="16">Movies</option>
              
              <option value="17">IPO Calendar</option> 

            </select>

          </div> 

        </div><!-- End Row Dropdown Display Feature -->

          <!-- Stocks -->

          <div class="page" id="Page1">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedZ" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed"

                      class="form-select speed-select"

                    >

                      <option {%if stocks_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if stocks_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if stocks_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ2" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow"

                      class="form-select speed-select"

                    >

                      <option {%if stocks_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if stocks_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if stocks_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition"

                      class="form-select animation-select"

                    >

                      <option {%if stocks_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if stocks_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if stocks_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputTextZ" class="col-form-label"

                      >Stock Symbol:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText3"

                      class="form-control"

                      aria-describedby="TextHelpInline"
                           
                      placeholder="e.g. AAPL"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn3" class="btn set-btn" onclick="stockValidate()">Add</button>

                  </div>
                  
                  <p id="demo" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTransitionZ" class="col-form-label"
                      >Pre-Market / After-Hours Prices
                    </label>
                  </div>
                  <div class="col-auto">
                    <input
                      class="form-check-input prepost-select"
                      type="checkbox"
                      value=""
                      id="flexCheckChecked-prepost"
                      {%if stocks_settings.prepost%}
                      checked
                      {%endif%} />
                  </div>
                </div>                

                <div class="row g-3 align-items-center left-div">
                  <div class="col-auto">
                    <label for="inputTransitionZ" class="col-form-label"
                      >Percent Change
                    </label>
                  </div>
                  <div class="col-auto">
                    <input
                      class="form-check-input percent-select"
                      type="checkbox"
                      value=""
                      id="flexCheckChecked"
                      {%if stocks_settings.percent%}
                      checked
                      {%endif%}
                    />
                  </div>
                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ" class="col-form-label"

                      >Point Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input point-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked2"

                      {%

                      if

                      stocks_settings.point%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ" class="col-form-label"

                      >Display Company Logos

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input logo-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked3"

                      {%

                      if

                      stocks_settings.logos%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>


                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked5"

                      {%

                      if

                      stocks_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>
                </div>


                <div class="row g-3 align-items-center left-div">
                  <div class="col-auto">
                    <label for="inputTransitionZ" class="col-form-label"
                      >Display Portfolio
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      class="form-check-input portfolio-select"
                      type="checkbox"
                      value=""
                      id="flexCheckChecked4"
                      {%
                      if
                      stocks_settings.chart%}
                      checked
                      {%endif%}
                      onclick="portfolioValidate()"
                    />
                  </div>
                </div>

                <p id="demo-portfolio" style="display: none"></p>
                
                <div id="stocks-portfolio" style="display: none;">
                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Shares:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="inputText8"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. 200" />
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Avg Cost:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="inputText9"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. 152.45" />
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Date:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="inputText10"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. YYYY-MM-DD" />
                  </div>
                </div>
                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="stocks-features"

                    class="display-features-list text-white symbol-list"

                  >

                  {% for f in stocks_settings.symbols %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="stocks-increase-btn"

                    class="upbutton fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="stocks-decrease-btn"

                    class="downbutton fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >

                  <br />

                  <br />



                  <i

                    id="stocks-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>



                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Crypto -->

          <div class="page" id="Page2" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeedZ3" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed2"

                      class="form-select speed-select"

                    >

                      <option {%if crypto_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if crypto_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if crypto_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ3" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow2"

                      class="form-select speed-select"

                    >

                      <option {%if crypto_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if crypto_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if crypto_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ3" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition2"

                      class="form-select animation-select"

                    >

                      <option {%if crypto_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if crypto_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if crypto_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTextZ3" class="col-form-label"

                      >Crypto,Base:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText4"

                      class="form-control"

                      aria-describedby="TextHelpInline"
                      
                      placeholder="e.g. BTC,USD"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn4" class="btn set-btn" onclick="cryptoValidate()">Add</button>

                  </div>
                  
                  <p id="demo2" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ3" class="col-form-label"

                      >Percent Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input percent-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked6"

                      {%

                      if

                      crypto_settings.percent%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransitionZ3" class="col-form-label"

                      >Point Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input point-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked7"

                      {%

                      if

                      crypto_settings.point%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransitionZ3" class="col-form-label"

                      >Display Crypto Logos

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input logo-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked8"

                      {%

                      if

                      crypto_settings.logos%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransitionZ3" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked10"

                      {%

                      if

                      crypto_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

                

                <div class="row g-3 align-items-center left-div">
                  <div class="col-auto">
                    <label for="inputTransitionZ" class="col-form-label"
                      >Display Portfolio
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      class="form-check-input portfolio-select"
                      type="checkbox"
                      value=""
                      id="crypto_portfolio_checkbox"
                      {%
                      if
                      crypto_settings.chart%}
                      checked
                      {%endif%}
                      onclick="portfolioCryptoValidate()"
                    />
                  </div>
                </div>

                <p id="demo-portfolio-crypto" style="display: none"></p>
                
                <div id="crypto-portfolio" style="display: none;">
                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Shares:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="cryptoshares"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. 200" />
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Avg Cost:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="cryptocost"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. 152.45" />
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputTextZ" class="col-form-label"
                      >Date:
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="cryptodate"
                      class="form-control"
                      aria-describedby="TextHelpInline"
                      placeholder="e.g. YYYY-MM-DD" />
                  </div>
                </div>
                </div>
                
                
                
              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="crypto-features"

                    class="display-features-list text-white symbol-list"

                  >

                  {% for f in crypto_settings.symbols %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="crypto-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="crypto-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="crypto-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>


     <!-- Commodities -->

          <div class="page" id="Page14" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeedZ20" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed20"

                      class="form-select speed-select"

                    >

                      <option {%if commodities_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if commodities_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if commodities_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ20" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow14"

                      class="form-select speed-select"

                    >

                      <option {%if commodities_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if commodities_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if commodities_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ20" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition20"

                      class="form-select animation-select"

                    >

                      <option {%if commodities_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if commodities_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if commodities_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTextZ20" class="col-form-label"

                      >Commodity Symbol:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText20"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                      placeholder="e.g. BRENTOIL"
                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn20" class="btn set-btn" onclick="commoditiesValidate()">Add</button>

                  </div>

                  <p id="demo8" style="display: none"></p>

                </div>



                <div class="commodities" id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ20" class="col-form-label"

                      >Percent Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input percent-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked32"

                      {%if commodities_settings.percent%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ20" class="col-form-label"

                      >Point Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input point-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked33"

                      {%

                      if

                      commodities_settings.point%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ20" class="col-form-label"

                      >Display Commodities Logos

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input logo-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked34"

                      {%

                      if

                      commodities_settings.logos%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>


                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ20" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked35"

                      {%

                      if

                      commodities_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="commodities-features"

                    class="display-features-list text-white symbol-list"

                  >

                  {% for f in commodities_settings.symbols %}

                      <li>{{f}}</li>

                    {% endfor%}


                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="commodities-increase-btn"

                    class="upbutton fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="commodities-decrease-btn"

                    class="downbutton fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >

                  <br />

                  <br />



                  <i

                    id="commodities-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>



                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>
      

    <!-- Indices -->

          <div class="page" id="Page15" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeedZ21" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed21"

                      class="form-select speed-select"

                    >

                      <option {%if indices_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if indices_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if indices_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ21" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow15"

                      class="form-select speed-select"

                    >

                      <option {%if indices_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if indices_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if indices_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ21" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition21"

                      class="form-select animation-select"

                    >

                      <option {%if indices_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if indices_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if indices_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTextZ21" class="col-form-label"

                      >Index Symbol:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText21"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                      placeholder="e.g. ^DJI"
                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn21" class="btn set-btn" onclick="indicesValidate()">Add</button>

                  </div>

                  <p id="demo9" style="display: none"></p>

                </div>



                <div class="indices" id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ21" class="col-form-label"

                      >Percent Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input percent-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked36"

                      {%if indices_settings.percent%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ21" class="col-form-label"

                      >Point Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input point-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked37"

                      {%

                      if

                      indices_settings.point%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ21" class="col-form-label"

                      >Display Indices Logos

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input logo-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked38"

                      {%

                      if

                      indices_settings.logos%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>


                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ21" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked39"

                      {%

                      if

                      indices_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="indices-features"

                    class="display-features-list text-white symbol-list"

                  >

                  {% for f in indices_settings.symbols %}

                      <li>{{f}}</li>

                    {% endfor%}


                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="indices-increase-btn"

                    class="upbutton fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="indices-decrease-btn"

                    class="downbutton fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >

                  <br />

                  <br />



                  <i

                    id="indices-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>



                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>      
      
      
      
          <!-- Forex -->

          <div class="page" id="Page3" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed3Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed3"

                      class="form-select speed-select"

                    >

                      <option {%if forex_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if forex_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if forex_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ3" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow3"

                      class="form-select speed-select"

                    >

                      <option {%if forex_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if forex_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if forex_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition3"

                      class="form-select animation-select"

                    >

                      <option {%if forex_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if forex_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if forex_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label"

                      >Base,Quote:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText5"

                      class="form-control"

                      aria-describedby="TextHelpInline"
                           
                      placeholder="e.g. JPY,EUR"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn5" class="btn set-btn" onclick="forexValidate()">Add</button>

                  </div>
                  
                  <p id="demo3" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Percent Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input percent-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked11"

                      {%

                      if

                      forex_settings.percent%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Point Change

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input point-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked12"

                      {%

                      if

                      forex_settings.point%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Currency Logos

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input logo-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked13"

                      {%

                      if

                      forex_settings.logos%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

<!-- 

                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display 30 Day Chart

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input chart-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked14"

                      {%

                      if

                      forex_settings.chart%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div> -->



                <div class="row g-3 align-items-center">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked15"

                      {%

                      if

                      forex_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="forex-features"

                    class="display-features-list text-white symbol-list"

                  >

                  {% for f in forex_settings.symbols %}

                      <li>{{f}}</li>

                    {% endfor%}

                    </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="forex-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="forex-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="forex-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Current Weather -->

          <div class="page" id="Page4" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed4Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed4"

                      class="form-select speed-select"

                    >

                      <option {%if current_weather.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if current_weather.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if current_weather.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow4Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow4"

                      class="form-select speed-select"

                    >

                      <option {%if current_weather.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if current_weather.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if current_weather.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition4"

                      class="form-select animation-select"

                    >

                      <option {%if current_weather.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if current_weather.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if current_weather.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label">City: </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText6"

                      class="form-control"

                      aria-describedby="TextHelpInline"
                        
                      placeholder="e.g. London"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn6" class="btn set-btn" onclick="currentWeatherValidate()">Add</button>

                  </div>
                  
                  <p id="demo6" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed" class="col-form-label"

                      >Temperature unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed42"

                      class="form-select temp-select"

                    >

                      <option {%if current_weather.temp == 'celsius' %} selected {% endif %}>Celsius</option>

                      <option {%if current_weather.temp == 'fahrenheit' %} selected {% endif %}>Fahrenheit</option>

                      

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Wind Speed Unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition42"

                      class="form-select wind-speed-select"

                    >

                      <option {%if current_weather.wind_speed == 'miles/hour' %} selected {% endif %}>Miles/hour</option>

                      <option {%if current_weather.wind_speed == 'kilometers/hour' %} selected {% endif %}>Kilometers/hour</option>

                    </select>

                  </div>

                </div>

                



                



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked16"

                      {%

                      if

                      current_weather.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label">API Key: </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="api-key1"
                           
                      placeholder="Weather API Key"

                      class="form-control api-key"

                      aria-describedby="TextHelpInline"
                           
                      value="{{ api_keys }}"

                    />

                  </div>

                  <div class="col-auto">

                    <button id="weather-api-btn" class="btn set-btn" onClick="showWeatherP()">Add</button>

                  </div>
                  
                  <p id="weather-api-p" style="display: none">New weather API key detected, please restart the ticker in order for the feature to work properly.</p>

                </div>

              </div>





              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="current-weather-features"

                    class="display-features-list text-white location-list"

                  >

                  {% for f in current_weather.locations.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="current-weather-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="current-weather-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="current-weather-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Daily Forecast -->

          <div class="page" id="Page5" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed5Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed5"

                      class="form-select speed-select"

                    >

                      <option {%if daily_weather.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if daily_weather.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if daily_weather.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow5Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow5"

                      class="form-select speed-select"

                    >

                      <option {%if daily_weather.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if daily_weather.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if daily_weather.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition5"

                      class="form-select animation-select"

                    >

                      <option {%if daily_weather.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if daily_weather.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if daily_weather.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label">City: </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText7"

                      class="form-control"

                      aria-describedby="TextHelpInline"
                           
                      placeholder="e.g. London"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn7" class="btn set-btn" onclick="dailyWeatherValidate()">Add</button>

                  </div>
                  
                  <p id="demo7" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed52Z" class="col-form-label"

                      >Temperature unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed52"

                      class="form-select temp-select"

                    >

                      <option {%if daily_weather.temp == 'celsius' %} selected {% endif %}>Celsius</option>

                      <option {%if daily_weather.temp == 'fahrenheit' %} selected {% endif %}>Fahrenheit</option>

                      

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition52Z" class="col-form-label"

                      >Wind Speed Unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition52"

                      class="form-select wind-speed-select"

                    >

                      <option {%if daily_weather.wind_speed == 'miles/hour' %} selected {% endif %}>Miles/hour</option>

                      <option {%if daily_weather.wind_speed == 'kilometers/hour' %} selected {% endif %}>Kilometers/hour</option>

                    </select>

                  </div>

                </div>



                



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Current Weather

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input current-weather-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked17"

                      {%if daily_weather.current_weather%} checked {% endif %}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked18"

                      {%

                      if

                      daily_weather.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label">API Key: </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="api-key"
                           
                      placeholder="Weather API Key"

                      class="form-control api-key"

                      aria-describedby="TextHelpInline"

                      value="{{ api_keys }}"
                         
                    />

                  </div>

                  <div class="col-auto">

                     <!-- <button id="weather-api-btn" class="btn set-btn">Add</button> -->

                  </div>

                </div>

                </div>





              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="daily-forecast-features"

                    class="display-features-list text-white location-list"

                  >

                  {% for f in daily_weather.locations.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="daily-forecast-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="daily-forecast-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="daily-forecast-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- News -->

          <div class="page" id="Page6" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed6Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed6"

                      class="form-select speed-select"

                    >

                      <option {%if news_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if news_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if news_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow6Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow6"

                      class="form-select speed-select"

                    >

                      <option {%if news_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if news_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if news_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition6"

                      class="form-select animation-select"

                    >

                      <option {%if news_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if news_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if news_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>





                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed62Z" class="col-form-label"

                      >Country:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed62"

                      class="form-select country-select"

                    >
                      <option {%if news_settings.country == 'Worldwide' %} selected {% endif %}>Worldwide</option>
                      <option {%if news_settings.country == 'United States' %} selected {% endif %}>United States</option>
                      <option {%if news_settings.country == 'Australia' %} selected {% endif %}>Australia</option>
                      <option {%if news_settings.country == 'Canada' %} selected {% endif %}>Canada</option>
                      <option {%if news_settings.country == 'Great Britain' %} selected {% endif %}>Great Britain</option>
                      <option {%if news_settings.country == 'New Zealand' %} selected {% endif %}>New Zealand</option>
                      <option {%if news_settings.country == 'Ireland' %} selected {% endif %}>Ireland</option>
                      <option {%if news_settings.country == 'Singapore' %} selected {% endif %}>Singapore</option>
                      <option {%if news_settings.country == 'South Africa' %} selected {% endif %}>South Africa</option>
                      <option {%if news_settings.country == 'Germany' %} selected {% endif %}>Germany</option>
                      <option {%if news_settings.country == 'Hong Kong' %} selected {% endif %}>Hong Kong</option>
                      <option {%if news_settings.country == 'Japan' %} selected {% endif %}>Japan</option>
                      <option {%if news_settings.country == 'South Korea' %} selected {% endif %}>South Korea</option>
                      <option {%if news_settings.country == 'China' %} selected {% endif %}>China</option>
                      <option {%if news_settings.country == 'France' %} selected {% endif %}>France</option>
                      <option {%if news_settings.country == 'India' %} selected {% endif %}>India</option>
                      <option {%if news_settings.country == 'Italy' %} selected {% endif %}>Italy</option>
                      <option {%if news_settings.country == 'Switzerland' %} selected {% endif %}>Switzerland</option>
                      <option {%if news_settings.country == 'Netherlands' %} selected {% endif %}>Netherlands</option>
                      <option {%if news_settings.country == 'Spain' %} selected {% endif %}>Spain</option>
                      <option {%if news_settings.country == 'Brazil' %} selected {% endif %}>Brazil</option>
                      <option {%if news_settings.country == 'Portugal' %} selected {% endif %}>Portugal</option>
                      
                    </select>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input news_check_class country-check"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked30"
                           
                      {%

                      if

                      news_settings.use_country%}

                      checked

                      {%endif%}
                           

                    />

                  </div>

                </div>





                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition62Z" class="col-form-label"

                      >Category:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition62"

                      class="form-select category-select"

                    >

                      <option {%if news_settings.category == 'General' %} selected {% endif %}>General</option>

                      <option {%if news_settings.category == 'Business' %} selected {% endif %}>Business</option>

                      <option {%if news_settings.category == 'Entertainment' %} selected {% endif %}>Entertainment</option>

                      <option {%if news_settings.category == 'Health' %} selected {% endif %}>Health</option>

                      <option {%if news_settings.category == 'Science' %} selected {% endif %}>Science</option>

                      <option {%if news_settings.category == 'Sports' %} selected {% endif %}>Sports</option>

                      <option {%if news_settings.category == 'Technology' %} selected {% endif %}>Technology</option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input news_check_class category-check"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked31"
                      
                      {%

                      if

                      news_settings.use_category%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition62Z" class="col-form-label"

                      >Headlines to display:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition62"

                      class="form-select category-select headline-num"

                    >

                      <option {%if news_settings.num_headlines == '10' %} selected {% endif %}>10</option>

                      <option {%if news_settings.num_headlines == '15' %} selected {% endif %}>15</option>

                      <option {%if news_settings.num_headlines == '20' %} selected {% endif %}>20</option>

                      <option {%if news_settings.num_headlines == '25' %} selected {% endif %}>25</option>

                      <option {%if news_settings.num_headlines == '30' %} selected {% endif %}>30</option>

                    </select>

                  </div>

                </div>



                <!-- <p class="text-center pt-2">Or</p> -->



                <!-- <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <input

                      class="form-check-input sources-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked20"

                      {%

                      if

                      news_settings.use_sources%}

                      checked

                      {%endif%}

                    />

                  </div>

                  <div class="col-auto">

                    <label for="inputTransition63" class="col-form-label"

                      >Sources:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputTransition63" class="form-select">

                      <option>Bloomberg</option>

                      <option>ABC news</option>

                      <option>Yahoo</option>

                      <option></option>

                      <option></option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <button id="inputTransitionBtn63" class="btn set-btn">

                      Add

                    </button>

                  </div>

                </div> -->



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked19"

                      {%

                      if

                      news_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="news-features"

                    class="display-features-list text-white sources-list"

                  >

                  {% for f in news_settings.sources %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="news-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="news-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="news-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Sports (Upcoming games) -->

          <div class="page" id="Page7" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed7Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed7"

                      class="form-select speed-select"

                    >

                      <option {%if upcoming_games.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if upcoming_games.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if upcoming_games.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow7Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow7"

                      class="form-select speed-select"

                    >

                      <option {%if upcoming_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if upcoming_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if upcoming_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition7"

                      class="form-select animation-select"

                    >

                      <option {%if upcoming_games.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if upcoming_games.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if upcoming_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition63" class="col-form-label"

                      >Sport League:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputTransition73" class="form-select">

                      <option>NFL</option>

                      <option>NBA</option>

                      <option>NHL</option>

                      <option>PREMIERLEAGUE</option>
                      
                      <option>MLB</option>
                      
                      <option>MLS</option>
                      
                      <option>PGA</option>

                      <option>LPGA</option>

                      <option>PGA_EU</option>
                      
                      <option>LIV</option>
                      
                      <option>NASCAR</option>
                      
                      <option>F1</option>
                      
                      <option>UFC</option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <button id="inputTransitionBtn73" class="btn set-btn">

                      Add

                    </button>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked21"

                      {%

                      if

                      upcoming_games.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="upcoming-games-features"

                    class="display-features-list text-white league-list"

                  >

                  {% for f in upcoming_games.leagues.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="upcoming-games-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="upcoming-games-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="upcoming-games-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Sports (Past games) -->

          <div class="page" id="Page8" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed8Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed8"

                      class="form-select speed-select"

                    >

                      <option {%if past_games.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if past_games.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if past_games.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow8Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow8"

                      class="form-select speed-select"

                    >

                      <option {%if past_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if past_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if past_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition8"

                      class="form-select animation-select"

                    >

                      <option {%if past_games.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if past_games.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if past_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition83Z" class="col-form-label"

                      >Sport League:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputTransition83" class="form-select">

                      <option>NFL</option>

                      <option>NBA</option>

                      <option>NHL</option>

                      <option>PREMIERLEAGUE</option>
                      
                      <option>MLB</option>
                      
                      <option>MLS</option>
                      
                      <option>PGA</option>

                      <option>LPGA</option>

                      <option>PGA_EU</option>
                      
                      <option>LIV</option>
                      
                      <option>UFC</option>
                      

                    </select>

                  </div>

                  <div class="col-auto">

                    <button id="inputTransitionBtn83" class="btn set-btn">

                      Add

                    </button>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked22"

                      {%

                      if

                      past_games.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="past-games-features"

                    class="display-features-list text-white league-list"

                  >

                  {% for f in past_games.leagues.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="past-games-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />



                  <i

                    id="past-games-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="past-games-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Sports (Live games) -->

          <div class="page" id="Page9" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed9Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed9"

                      class="form-select speed-select"

                    >

                      <option {%if live_games.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if live_games.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if live_games.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow9Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow9"

                      class="form-select speed-select"

                    >

                      <option {%if live_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if live_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if live_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition9"

                      class="form-select animation-select"

                    >

                      <option {%if live_games.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if live_games.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if live_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition93Z" class="col-form-label"

                      >Sport League:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputTransition93" class="form-select">

                      <option>NFL</option>

                      <option>NBA</option>

                      <option>NHL</option>

                      <option>PREMIERLEAGUE</option>

                      <option>MLB</option>

                      <option>MLS</option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <button id="inputTransitionBtn93" class="btn set-btn">

                      Add

                    </button>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked23"

                      {%

                      if

                      live_games.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="live-games-features"

                    class="display-features-list text-white league-list"

                  >

                  {% for f in live_games.leagues.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="live-games-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="live-games-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="live-games-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Sports (Team Stats) -->

          <div class="page" id="Page10" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed10Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed10"

                      class="form-select speed-select"

                    >

                      <option {%if team_stats.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if team_stats.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if team_stats.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow10Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select
                      id="inputScrollSpeedRow10"
                      class="form-select speed-select">
                      <option {%if team_stats.speed2 == 'medium' %} selected {% endif %}>Medium</option>
                      <option {%if team_stats.speed2 == 'slow' %} selected {% endif %}>Slow</option>
                      <option {%if team_stats.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition10"

                      class="form-select animation-select">

                      <option {%if team_stats.animation == 'down' %} selected {% endif %}>Down</option>
                      <option {%if team_stats.animation == 'up' %} selected {% endif %}>Up</option>
                      <option {%if team_stats.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">
                  <div class="col-auto">
                    <label for="inputTransition103Z" class="col-form-label"
                      >Sport League:
                    </label>
                  </div>

                  <div class="col-auto">
                    <select id="inputTransition103" class="form-select">
                      <option>NFL</option>
                      <option>NBA</option>
                      <option>NHL</option>
                      <option>PREMIERLEAGUE</option>
                      <option>MLB</option>
                      <option>MLS</option>
                      <option>PGA</option>
                      <option>LPGA</option> 
                    </select>
                  </div>

                  <div class="col-auto">
                    <button id="inputTransitionBtn103" class="btn set-btn">
                      Add
                    </button>
                  </div>

                </div>

                
                <div class="row g-3 align-items-center mt-3">
                  <div class="col-auto">
                    <label for="inputTransition103Z" class="col-form-label"
                      >Golf Rankings:
                    </label>
                  </div>
                  <div class="col-auto">
                    <select id="golf-ranking-number" class="form-select">
                      <option {%if team_stats.top20 == 10 %} selected {% endif %}>Top 10</option>
                      <option {%if team_stats.top20 == 20 %} selected {% endif %}>Top 20</option>
                    </select>
                  </div>
                  <div class="col-auto">
                    <button id="golf-ranking-set" class="btn set-btn">
                      Set
                    </button>
                  </div>
                </div>

                
                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked24"

                      {% if team_stats.title%}
                      checked
                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="team-stats-features"

                    class="display-features-list text-white league-list"

                  >

                  {% for f in team_stats.leagues.keys() %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="team-stats-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="team-stats-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="team-stats-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>


      
    <!-- Movies -->

          <div class="page" id="Page16" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeedZ22" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed22"

                      class="form-select speed-select"

                    >

                      <option {%if movie_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if movie_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if movie_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRowZ22" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow16"

                      class="form-select speed-select"

                    >

                      <option {%if movie_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if movie_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if movie_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransitionZ22" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition22"

                      class="form-select animation-select"

                    >

                      <option {%if movie_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if movie_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if movie_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>




                <div class="row g-3 align-items-center mt-3" style="padding-bottom: 25px;">

                  <div class="col-auto">

                    <label for="inputTransition64Z" class="col-form-label"

                      >Category:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition64"

                      class="form-select category-select movie-categories"

                    >

                      <option {%if movie_settings.category == 'Popular All' %} selected {% endif %}>Popular All</option>

                      <option {%if movie_settings.category == 'Popular TV' %} selected {% endif %}>Popular TV</option>

                      <option {%if movie_settings.category == 'Popular Movies' %} selected {% endif %}>Popular Movies</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center left-div">

                  <div class="col-auto">

                    <label for="inputTransitionZ22" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked40"

                      {%

                      if

                      movie_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>


                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label">API Key: </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="api-key-movie"
                           
                      placeholder="Movies API Key"

                      class="form-control api-key"

                      aria-describedby="TextHelpInline"
                           
                      value="{{ movie_api_key }}"

                    />

                  </div>

                  <div class="col-auto">

                    <button id="movie-api-btn" class="btn set-btn" onClick="showMovieP()">Add</button>

                  </div>
                  
                  <p id="movie-api-p" style="display: none">New movies API key detected, please restart the ticker in order for the feature to work properly.</p>

                </div>

              



              </div>





              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="movies-features"

                    class="display-features-list text-white symbol-list"

                  >


                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="movies-increase-btn"

                    class="upbutton fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="movies-decrease-btn"

                    class="downbutton fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >

                  <br />

                  <br />



                  <i

                    id="movies-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>



                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>      


    <!-- IPO Calendar -->

          <div class="page" id="Page17" style="display: none">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="row g-3 align-items-center mt-3">
                  <div class="col-auto">
                    <label for="inputScrollSpeedZ222" class="col-form-label">Scroll Speed:</label>
                  </div>

                  <div class="col-auto">
                    <select
                      id="inputScrollSpeed222"
                      class="form-select speed-select">

                      <option {%if ipo_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
                      <option {%if ipo_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
                      <option {%if ipo_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3 left-div">
                  <div class="col-auto">
                    <label for="inputScrollSpeedRowZ222" class="col-form-label">Scroll Speed (Row 2):</label>
                  </div>

                  <div class="col-auto">
                    <select
                      id="inputScrollSpeedRow17"
                      class="form-select speed-select">
                      <option {%if ipo_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
                      <option {%if ipo_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
                      <option {%if ipo_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
                    </select>

                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3">
                  <div class="col-auto">
                    <label for="inputTransitionZ222" class="col-form-label">Intro Transition:</label>
                  </div>

                  <div class="col-auto">
                    <select id="inputTransition222" class="form-select animation-select">
                      <option {%if ipo_settings.animation == 'down' %} selected {% endif %}>Down</option>
                      <option {%if ipo_settings.animation == 'up' %} selected {% endif %}>Up</option>
                      <option {%if ipo_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
                    </select>
                  </div>

                </div>

                <div class="row g-3 align-items-center left-div" style="padding-top: 25px;">
                  <div class="col-auto">
                    <label for="inputTransitionZ222" class="col-form-label">
                      Display Feature Title
                    </label>
                  </div>

                  <div class="col-auto">
                    <input
                      class="form-check-input title-select"
                      type="checkbox"
                      value=""
                      id="flexCheckChecked41"

                      {% if ipo_settings.title%}
                      checked
                      {%endif%}
                    />
                  </div>
                </div>

                <div class="row g-3 align-items-center mt-3">
                  <div class="col-auto">
                    <label for="inputText" class="col-form-label">API Key: </label>
                  </div>

                  <div class="col-auto">
                    <input
                      type="text"
                      id="api-key-ipo"
                      placeholder="IPO Calendar API Key"
                      class="form-control api-key"
                      aria-describedby="TextHelpInline"
                      value="{{ ipo_api_key }}"/>
                  </div>

                  <div class="col-auto">
                    <button id="ipo-api-btn" class="btn set-btn" onClick="showIpoP()">Add</button>
                  </div>
                  
                  <p id="ipo-api-p" style="display: none">New IPO Calendar API key detected, please restart the ticker in order for the feature to work properly.</p>

                </div>
              </div>


              <div class="col-lg-4 col-md-4 col-sm-12">
                <h6 class="mt-3">List:</h6>
                <div class="features-div-two">
                  <ul id="ipo-features" class="display-features-list text-white symbol-list">
                  </ul>
                </div>
              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">
                <div class="icons-list">
                  <i id="ipo-increase-btn"
                    class="upbutton fa fa-chevron-up"
                    aria-hidden="true"></i>

                  <br />
                  <br />

                  <i id="ipo-decrease-btn"
                    class="downbutton fa fa-chevron-down"
                    aria-hidden="true"></i>
                  <a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>

                  <br />
                  <br />

                  <i id="ipo-remove-btn"
                    class="fa fa-minus"
                    aria-hidden="true"></i>
                  <span style="position: relative; bottom: 0; left: 10px">Remove</span>

                </div>
              </div>
            </div>

            <div class="save-btn-div">
              <a href="#" class="btn save-btn">Save</a>
            </div>

          </div>
      
      
          <!-- Custom Images -->

          <div class="page" id="Page11" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label"

                      >Image File:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="file"

                      id="inputText11"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                      placeholder="Browse"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn11" class="btn set-btn">Add</button>

                  </div>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed11Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed11"

                      class="form-select speed-select"

                    >

                      <option {%if image_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if image_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if image_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow11Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow11"

                      class="form-select speed-select"

                    >

                      <option {%if image_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if image_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if image_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition11Z" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition11"

                      class="form-select animation-select"

                    >

                      <option {%if image_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if image_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if image_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Pause on screen (Seconds)

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText12"

                      class="form-control pause-select"

                      aria-describedby="TextHelpInline"

                      value="{{image_settings.pause}}"

                    />

                  </div>



                  <!--

                  <div class="col-auto">

                    <input

                      class="form-check-input"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked26"

                      checked

                    />

                  </div>

                  -->

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      id="flexCheckChecked25"

                      {%

                      if

                      image_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="images-features"

                    class="display-features-list text-white image-list"

                  >

                  {% for f in image_settings.images %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="images-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="images-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="images-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Custom GIFs -->

          <div class="page" id="Page12" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label"

                      >GIF File:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="file"

                      id="inputText1112"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                      placeholder="Browse"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn1112" class="btn set-btn">

                      Add

                    </button>

                  </div>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed12Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed12"

                      class="form-select speed-select"

                    >

                      <option {%if GIF_settings.speed == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if GIF_settings.speed == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if GIF_settings.speed == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow12Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow12"

                      class="form-select speed-select"

                    >

                      <option {%if GIF_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>

                      <option {%if GIF_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>

                      <option {%if GIF_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition11" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition12"

                      class="form-select animation-select"

                    >

                      <option {%if GIF_settings.animation == 'down' %} selected {% endif %}>Down</option>

                      <option {%if GIF_settings.animation == 'up' %} selected {% endif %}>Up</option>

                      <option {%if GIF_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Pause on screen (Seconds)

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText112"

                      class="form-control pause-select"

                      aria-describedby="TextHelpInline"

                      value="{{GIF_settings.pause}}"

                    />

                  </div>

                  <!--

                  <div class="col-auto">

                    <input

                      class="form-check-input"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked27"

                      checked

                    />

                  </div>

                  -->

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked28"

                      {%

                      if

                      GIF_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="gifs-features"

                    class="display-features-list text-white image-list"

                  >

                  {% for f in GIF_settings.images %}

                      <li>{{f}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="gifs-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="gifs-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="gifs-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>



          <!-- Custom Messages -->

          <div class="page" id="Page13" style="display: none">

            <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12">

                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputText" class="col-form-label"

                      >Message Name:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText13"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                      placeholder="Message Title"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn13" class="btn set-btn" onclick="customMsgValidate()">Add</button>

                  </div>
                  
                  <p id="demo4" style="display: none"></p>

                </div>



                <div id="limit-msg">

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed13Z" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed13"

                      class="form-select speed-select"

                    >

                      <option {%if message_settings.speed == 'Medium' %} selected {% endif %}>Medium</option>

                      <option {%if message_settings.speed == 'Slow' %} selected {% endif %}>Slow</option>

                      <option {%if message_settings.speed == 'Fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3 left-div">

                  <div class="col-auto">

                    <label for="inputScrollSpeedRow13Z" class="col-form-label"

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow13"

                      class="form-select speed-select"

                    >

                      <option {%if message_settings.speed2 == 'Medium' %} selected {% endif %}>Medium</option>

                      <option {%if message_settings.speed2 == 'Slow' %} selected {% endif %}>Slow</option>

                      <option {%if message_settings.speed2 == 'Fast' %} selected {% endif %}>Fast</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition13Z" class="col-form-label"

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition13"

                      class="form-select animation-select"

                    >

                      <option {%if message_settings.animation == 'Down' %} selected {% endif %}>Down</option>

                      <option {%if message_settings.animation == 'Up' %} selected {% endif %}>Up</option>

                      <option {%if message_settings.animation == 'Continuous' %} selected {% endif %}>Continuous</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText14Z" class="col-form-label"

                      >Message:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText14"

                      class="form-control message-input"

                      aria-describedby="TextHelpInline"
                           
                      placeholder="Custom Message"

                    />

                  </div>
                  
                  <p id="demo5" style="display: none"></p>

                </div>



                <!--

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputText15" class="col-form-label"

                      >Optional Message (row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText15"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                    />

                  </div>

                </div>

                  

                  

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed14" class="col-form-label"

                      >Border Color:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputScrollSpeed14" class="form-select">

                      <option>Rainbow</option>

                      <option></option>

                      <option></option>

                    </select>

                  </div>

                </div>



                

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed15" class="col-form-label"

                      >Border:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputScrollSpeed15" class="form-select">

                      <option>Dotted</option>

                      <option></option>

                      <option></option>

                    </select>

                  </div>

                </div>

                -->



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed16Z" class="col-form-label"

                      >Text Color:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed16"

                      class="form-select text-colour"

                    >

                      <option>Black</option>

                      <option>White</option>

                      <option>Red</option>

                      <option>Green</option>

                      <option>Dark Green</option>

                      <option>Blue</option>

                      <option>Purple</option>

                      <option>Pink</option>

                      <option>Yellow</option>

                      <option>Orange</option>

                      <option>Gold</option>

                      <option>Gray</option>

                      <option>Cyan</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed17Z" class="col-form-label"

                      >Text Size:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed17"

                      class="form-select text-size"

                    >

                      <option>Large</option>

                      <option>Medium</option>

                      <option>Small</option>

                      

                    </select>

                  </div>

                </div>



                <!--

                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed18" class="col-form-label"

                      >Font:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select id="inputScrollSpeed18" class="form-select">

                      <option>Arial</option>

                      <option></option>

                      <option></option>

                    </select>

                  </div>

                </div>

                -->



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputScrollSpeed19Z" class="col-form-label"

                      >Background Color:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed19"

                      class="form-select back-colour"

                    >

                      <option>Black</option>

                      <option>White</option>

                      <option>Red</option>

                      <option>Green</option>

                      <option>Dark Green</option>

                      <option>Blue</option>

                      <option>Purple</option>

                      <option>Pink</option>

                      <option>Yellow</option>

                      <option>Orange</option>

                      <option>Gold</option>

                      <option>Gray</option>

                      <option>Cyan</option>

                    </select>

                  </div>

                </div>



                <div class="row g-3 align-items-center mt-3">

                  <div class="col-auto">

                    <label for="inputTransition" class="col-form-label"

                      >Display Feature Title

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      class="form-check-input title-select"

                      type="checkbox"

                      value=""

                      id="flexCheckChecked29"

                      {%

                      if

                      message_settings.title%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div>

              </div>

              <div class="col-lg-4 col-md-4 col-sm-12">

                <h6 class="mt-3">List:</h6>

                <div class="features-div-two">

                  <ul

                    id="messages-features"

                    class="display-features-list text-white message-list"

                  >

                    {%for f in message_settings.messages %}

                      <li>{{f.name}}</li>

                    {% endfor%}

                  </ul>

                </div>

              </div>

              <div class="col-lg-2 col-md-2 col-sm-12">

                <div class="icons-list">

                  <i

                    id="messages-increase-btn"

                    class="fa fa-chevron-up"

                    aria-hidden="true"

                  ></i>

                  <br />

                  <br />

                  <i

                    id="messages-decrease-btn"

                    class="fa fa-chevron-down"

                    aria-hidden="true"

                  ></i>

                  <a style="position: relative; bottom: 30px; left: 10px"

                    >Sort Order</a

                  >



                  <br />

                  <br />

                  <i

                    id="messages-remove-btn"

                    class="fa fa-minus"

                    aria-hidden="true"

                  ></i>

                  <span style="position: relative; bottom: 0; left: 10px"

                    >Remove</span

                  >

                </div>

              </div>

            </div>



            <div class="save-btn-div">

              <a href="#" class="btn save-btn">Save</a>

            </div>

          </div>

        </div>

      </section>

      

      <div class="row-2"></div>

      <section class="stocks-features text-white row-3">

              <div

          class="mx-auto my-5 d-flex align-items-center position-relative"

          style="width: fit-content"

        >

          <div class="mr-5">

            <div class="mx-auto row g-3 align-items-center mb-2">

              <div class="col-auto">

                <label

                  for="wifi-ssid-inputZ"

                  class="col-form-label text-right w-115-px"

                  >Wi-Fi SSID:

                </label>

              </div>

              <div class="col-auto">

                <input

                  type="text"

                  id="wifi-ssid-input"

                  class="form-control"
                       
                  placeholder="Wi-Fi SSID"

                  aria-describedby="TextHelpInline"

                  value="{{ wifi_SSID }}"   
                    
                />

              </div>

            </div>

            <div class="mx-auto row g-3 align-items-center mt-2">

              <div class="col-auto">

                <label

                  for="wi-fi-pass-input"

                  class="col-form-label text-right w-115-px"

                  >Wi-Fi password:

                </label>

              </div>

              <div class="col-auto">

                <input

                  type="password"

                  id="wifi-pass-input"
                       
                  placeholder="Wi-Fi password"

                  class="form-control"

                  aria-describedby="TextHelpInline"
                       
                  value="{{ wifi_PSK }}"

                />

              </div>

            </div>

            <input type="checkbox" class="form-check-input pass-toggle" onclick="togglePass()"> Show Password
            
            <div class="mx-auto row g-3 align-items-center mt-2">

              <div class="col-auto">

                <label

                  for="country-code-inputZ"

                  class="col-form-label text-right w-115-px"

                  >Two Letter Country Code:

                </label>

              </div>

              <div class="col-auto">

                <input

                  type="text"

                  id="country-code-input"
                       
                  placeholder="2 Letter Country Code"

                  class="form-control"

                  aria-describedby="TextHelpInline"

                  value={{ general_settings.country_code }}

                />

              </div>

            </div>

            <div>

              

            </div>

          </div>

          <button class="btn set-btn" id="join-network-btn" onClick=showDivTwo()>

            Join Network

          </button>

          <div id="network-status" style="padding-left:2%;padding-right:2%"></div>

          <div class="status rounded-circle" id="circle-1" style="display:none"></div>

          <div class="status rounded-circle" id="circle-2" style="display:none"></div>

          <div class="status rounded-circle" id="circle-3" style="display:none"></div>

        </div> 

        </section>

 
  
 <svg class="svg--source" width="0" height="0" aria-hidden="true">

  <symbol id="svg--twitter" viewbox="0 -7 15 30">
    <path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
    />
  </symbol>

  <symbol id="svg--trello" viewBox="-150 0 748 512">
    <path d="M392.3 32H56.1C25.1 32 0 57.1 0 88c-.1 0 0-4 0 336 0 30.9 25.1 56 56 56h336.2c30.8-.2 55.7-25.2 55.7-56V88c.1-30.8-24.8-55.8-55.6-56zM197 371.3c-.2 14.7-12.1 26.6-26.9 26.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8 12-26.9 26.9-26.9h82.9c14.8 0 26.9 12 26.9 26.9v254.2zm193.1-112c0 14.8-12 26.9-26.9 26.9h-81c-14.8 0-26.9-12-26.9-26.9V117.2c0-14.8 12-26.9 26.8-26.9h81.1c14.8 0 26.9 12 26.9 26.9v142.1z"/></symbol>


  <symbol id="svg--discord" viewBox="-100 0 840 512">
    <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
  </symbol>


  <symbol id="svg--facebook" viewbox="0 -7 16 30">
    <path d="M12 3.303h-2.285c-0.27 0-0.572 0.355-0.572 0.831v1.65h2.857v2.352h-2.857v7.064h-2.698v-7.063h-2.446v-2.353h2.446v-1.384c0-1.985 1.378-3.6 3.269-3.6h2.286v2.503z" />
  </symbol>

  <symbol id="svg--instagram" viewBox="-150 0 748 512">
    <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
  </symbol>


  <symbol id="svg--reddit" viewBox="-100 0 712 512">
    <path d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z"/>
  </symbol>




  <symbol id="svg--youtube" viewbox="-150 -150 800 800">
    <path d="M459,61.2C443.7,56.1,349.35,51,255,51c-94.35,0-188.7,5.1-204,10.2C10.2,73.95,0,163.2,0,255s10.2,181.05,51,193.8
      C66.3,453.9,160.65,459,255,459c94.35,0,188.7-5.1,204-10.2c40.8-12.75,51-102,51-193.8S499.8,73.95,459,61.2z M204,369.75v-229.5
      L357,255L204,369.75z" />
  </symbol>

</svg>

<div class="wrapper">
<div class="connect">

  <a href="https://twitter.com/Finticofficial" target="_blank" class="share twitter">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--twitter" />
    </svg>
    <span class="clip">TWITTER</span>
  </a>


  <a href="https://www.instagram.com/fintic.io/" target="_blank" class="share instagram">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--instagram" />
      <span class="clip">INSTAGRAM</span>
    </svg>
  </a>


  <a href="https://www.youtube.com/channel/UCTHJ3rnZn0O-P7dtk_WGCxg" target="_blank" class="share  youtube">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--youtube" />
      <span class="clip">YOU-TUBE</span>
    </svg>
  </a>


  <a href="https://www.facebook.com/fintic.io" target="_blank" rel="author" class="share facebook">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--facebook" />
      <span class="clip">FACEBOOK</span>
    </svg>
  </a>


  <a href="https://discord.gg/tdwN3QfrM2" target="_blank" rel="author" class="share discord">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--discord" />
      <span class="clip">DISCORD</span>
    </svg>
  </a>


  <a href="https://www.reddit.com/r/fintic/" target="_blank" class="share  reddit">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--reddit" />
      <span class="clip">REDDIT</span>
    </svg>
  </a>

  <a href="https://trello.com/b/EkQQnA9d/fintic-official-dev-board" target="_blank" class="share  trello">
    <svg role="presentation" class="svg--icon">
      <use xlink:href="#svg--trello" />
      <span class="clip">TRELLO</span>
    </svg>
  </a>

</div>
</div> 


      <!-- Footer -->

      <footer class="footer">

        <p>&copy; 2020-2023 Fintic Limited., All Rights Reserved. <a href="mailto:info@fintic.io" id="footerlinks">Contact Us.</a></p>

        <p>Data Provided by IEX Cloud, Openweathermap, CoinGecko, Exchangerate-API, TheSportsDB, Google News, Yahoo Finance, ESPN, The Movie DB, Finnhub</p>

        <p>Useful resources: <a href="https://www.youtube.com/playlist?list=PLf8pW0bNjnebNZh3y0AsY18sxJj6IhAsv" id="footerlinks" target="_blank">YouTube Tutorials</a> , <a href="https://docs.google.com/spreadsheets/d/1IZkEl49j97xvG8jcEdWc5XdOLOUb_-ZLVHle2vezWCc/edit?usp=sharing" id="footerlinks" target="_blank">Formatting Guide & Info</a> , <a href="https://fintic.io" id="footerlinks" target="_blank">Official Website</a></p>

        <p><br>DISCLAIMER: None of our products and services serve as financial advice, and we do not qualify as investment advisors. <br>Since data can be delayed, information may not always be accurate and should not be taken as any advice.</p>
        
      </footer>

    </div>


    <script src="{{ url_for('static', filename='js/jquery-2.1.1.js') }}"></script>

<!--     <script src="{{ url_for('static', filename='app.js') }}"></script>.  ALWAYS CHANGE VERSIONING WHENEVER CHANGES ARE MADE TO AVOID BAD CACHING -->
    <script type='text/javascript' src='../static/app.js?ver=1.3.4'></script>

    <script>

      $("#drop").on("change", function () {

        var value = $(this).val();

        if (value) {

          $(".page").hide();

          $("#Page" + value).show();

        }

      });



      // check / uncheck category and country checkboxes

      $('.news_check_class').on('change', function() {

      $('.news_check_class').not(this).prop('checked', false);  

      });



 

    setInterval(async () => {

      // const result = await checkOnlineStatus();

      const statusDisplay = $("#network-status");

      var result;



      // try to send a request to some server

      try {

        const online = await fetch("https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d="+Date.now());

        console.log(online.status);



        if (online.status >= 200 && online.status < 300){

          statusDisplay.text("Connected");

          $('#circle-1').show();

          $('#circle-2').hide();

          $('#circle-3').hide();

        } // either true or false

        else {

          statusDisplay.text("Connected but No Internet");

          $('#circle-1').hide();

          $('#circle-2').hide();

          $('#circle-3').show();

        }



      } catch (err) {

        statusDisplay.text("Offline"); // definitely offline

        $('#circle-1').hide();

        $('#circle-2').show();

        $('#circle-3').hide();

      }

    }, 3000);





    </script>

  </body>

</html>

