<!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</title>



    <!-- 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" />

  </head>



  <body>

    <div class="container">

      <!-- Top logo bar -->



      <!-- Top logo bar -->

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

        <div class="container">

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

          <img src="{{ url_for('static', filename='images/logo_white.png') }}" class="logo" alt="logo" /><p class="text-white">Version 1.0</p>

          </a>

        

         <div class="hostname-text">

          <p>

            Hostname: <span id="host-name">{{ general_settings.hostname }}</span>.local

          </p>

        </div>

        <div class="">

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

        </div>

        </div>

      </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">

            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 text-white">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 -->



      <!-- Ticker Form -->

      <!-- First Row -->

      <div class="ticker-form" style="padding-top:3%; padding-bottom:2%;border-bottom:2px 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-input" 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 btn-secondary" 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="inputAnimation" class="col-form-label">Screensaver animation:

                </label>

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

              <div class="col-auto">

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

                  <option>Pulsating Colors</option>

                  <!--<option>Rotating Square</option>-->

                  <option>Pulsating brightness</option>

                  <!--<option>Game of Life</option>-->

                  <option>Sleep</option>

                </select>

              </div>

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

                <button class="btn btn-secondary">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-input" 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 btn-secondary" 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="inputDisplayFormat" class="col-form-label">Ticker Display Format:

              </label>        

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

          <div class="col-auto">

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

                  <option>Standard Scrolling</option>

                  <option>Professional two rows</option>

                </select>

          </div>   

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

            <button class="btn btn-secondary" 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%">

        <h3 class="text-white">Features to Display:</h3>

        <p>

          Selected Display format:

          <span class="font-6" id="selected-display-text"></span>

        </p>

      </div>   

    </div><br>



    <!-- Features List First Row -->

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

      <!-- Available Features Column -->

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

        <div class="row">

          <h4 id="top-row-text" style="display:none">Top row</h4>

        <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-dark">

               {% 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-list">

        <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-dark">

                  

                  

                  

                    {% 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">

        <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>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:2px 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-dark">

                <li>Stocks</li>

                <li>Crypto</li>

                <li>Forex</li>

                <li>Current Weather</li>

                <li>Daily Forecast</li>

                <li>News</li>

                <li>Custom Images</li>

                <li>Custom Messages</li>

                <li>Cstom Gifs</li>

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

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

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

                <li>Sports (Team Stats)</li>

              </ul>

            </div>

          </div>



          <!-- End Features Column -->

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

        <div class="icon-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-dark">

                {%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="icon">

        <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%">

      <h4 class="pt-3">What to display in each feature:</h4>

    </div>

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

          <div class="col-auto">

            <label for="drop" 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="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>

            </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="inputScrollSpeed" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition"

                      class="form-select animation-select"

                    >

                      <option>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Stock Symbol:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText3"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                    />

                  </div>



                  <div class="col-auto">

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

                  </div>

                </div>



                <div id="limit-msg">

                </div>



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

                  <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="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="inputTransition" 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="inputTransition" 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="inputTransition" class="col-form-label"

                      >Display Intraday Chart

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

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

                      type="checkbox"

                      value=""

                      id="flexCheckChecked4"

                      {%

                      if

                      stocks_settings.chart%}

                      checked

                      {%endif%}

                    />

                  </div>

                </div> -->



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

                  <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="flexCheckChecked5"

                      {%

                      if

                      stocks_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="stocks-features"

                    class="display-features-list text-dark 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="inputScrollSpeed2" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed2"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow2"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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="inputTransition2"

                      class="form-select animation-select"

                    >

                      <option>Down</option>

                      <option>Up</option>

                      <option>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"

                      >Crypto Symbol Currency:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText4"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn4" 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="inputTransition" 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="inputTransition" 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="inputTransition" 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="inputTransition" class="col-form-label"

                      >Display Intraday Chart

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

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

                      type="checkbox"

                      value=""

                      id="flexCheckChecked9"

                      {%

                      if

                      crypto_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="flexCheckChecked10"

                      {%

                      if

                      crypto_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="crypto-features"

                    class="display-features-list text-dark 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>



          <!-- 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="inputScrollSpeed3" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed3"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow3"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>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"

                      >Currency,Base:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText5"

                      class="form-control"

                      aria-describedby="TextHelpInline"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn5" 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="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-dark 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="inputScrollSpeed4" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed4"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow4"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>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"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn6" 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="inputScrollSpeed" class="col-form-label"

                      >Temperature unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed42"

                      class="form-select temp-select"

                    >

                      <option>Celsius</option>

                      <option>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>Miles/hour</option>

                      <option>Kilometers/hour</option>

                      <option></option>

                      <option></option>

                      <option></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"

                      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="current-weather-features"

                    class="display-features-list text-dark 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="inputScrollSpeed5" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed5"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow5"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>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"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn7" 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="inputScrollSpeed52" class="col-form-label"

                      >Temperature unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed52"

                      class="form-select temp-select"

                    >

                      <option>Celsius</option>

                      <option>Fahrenheit</option>

                      

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Wind Speed Unit:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition52"

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

                    >

                      <option>Miles/hour</option>

                      <option>Kilometers/hour</option>

                      <option></option>

                      <option></option>

                      <option></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"

                      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="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"

                      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-dark 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="inputScrollSpeed6" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed6"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow6"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>





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

                  <div class="col-auto">

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

                      >Country:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed62"

                      class="form-select country-select"

                    >

                      <option>United States</option>

                      <option>Australia</option>

                      <option>Canada</option>

                      <option>Great Britain</option>

                      <option>New Zealand</option>

                      <option>Ireland</option>

                      <option>Singapore</option>

                      <option>South Africa</option>

                      <option>Worldwide</option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <input

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

                      type="checkbox"

                      value=""

                      id="flexCheckChecked30"

                    />

                  </div>

                </div>





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

                  <div class="col-auto">

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

                      >Category:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition62"

                      class="form-select category-select"

                    >

                      <option>General</option>

                      <option>Business</option>

                      <option>Entertainment</option>

                      <option>Health</option>

                      <option>Science</option>

                      <option>Sports</option>

                      <option>Technology</option>

                    </select>

                  </div>

                  <div class="col-auto">

                    <input

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

                      type="checkbox"

                      value=""

                      id="flexCheckChecked31"

                    />

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Headlines to display:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition62"

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

                    >

                      <option>10</option>

                      <option>15</option>

                      <option>20</option>

                      <option>25</option>

                      <option>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-dark 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="inputScrollSpeed7" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed7"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow7"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>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>

                    </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-dark 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="inputScrollSpeed8" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed8"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow8"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

                    <label for="inputTransition83" 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>

                    </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-dark 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="inputScrollSpeed9" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed9"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow9"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

                    <label for="inputTransition93" 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>

                    </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-dark 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="inputScrollSpeed10" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed10"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow10"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

                    <label for="inputTransition103" 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>

                    </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="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-dark 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>



          <!-- 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="inputScrollSpeed11" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed11"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow11"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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="inputTransition11"

                      class="form-select animation-select"

                    >

                      <option>Down</option>

                      <option>Up</option>

                      <option>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-dark 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="inputScrollSpeed12" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed12"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow12"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>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>Down</option>

                      <option>Up</option>

                      <option>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-dark 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="Custom Message"

                    />

                  </div>



                  <div class="col-auto">

                    <button id="inputTextBtn13" 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="inputScrollSpeed13" class="col-form-label"

                      >Scroll Speed:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed13"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Scroll Speed (Row 2):

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeedRow13"

                      class="form-select speed-select"

                    >

                      <option>Medium</option>

                      <option>Slow</option>

                      <option>Fast</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Intro Transition:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputTransition13"

                      class="form-select animation-select"

                    >

                      <option>Down</option>

                      <option>Up</option>

                      <option>Continuous</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

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

                      >Message:

                    </label>

                  </div>

                  <div class="col-auto">

                    <input

                      type="text"

                      id="inputText14"

                      class="form-control message-input"

                      aria-describedby="TextHelpInline"

                    />

                  </div>

                </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="inputScrollSpeed16" class="col-form-label"

                      >Text Color:

                    </label>

                  </div>

                  <div class="col-auto">

                    <select

                      id="inputScrollSpeed16"

                      class="form-select text-colour"

                    >

                      <option>White</option>

                      <option>Black</option>

                      <option>Red</option>

                      <option>Green</option>

                      <option>Blue</option>

                      <option>Purple</option>

                      <option>Yellow</option>

                      <option>Cyan</option>

                    </select>

                  </div>

                </div>



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

                  <div class="col-auto">

                    <label for="inputScrollSpeed17" 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="inputScrollSpeed19" 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>Blue</option>

                      <option>Purple</option>

                      <option>Yellow</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-dark 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-input"

                  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"

                  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"

                  class="form-control"

                  aria-describedby="TextHelpInline"

                />

              </div>

            </div>

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

              <div class="col-auto">

                <label

                  for="country-code-input"

                  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"

                  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">

            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>



      <!-- Footer -->

      <footer class="footer">

        <p>&copy; 2022 Fintic All Rights Reserved</p>

        <p>Data Provided by IEX Cloud, Openweathermap, CoinGecko,</p>

        <p>Exchangerate-API, TheSportsDB, Commodities-API, NewsAPI</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>

    <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>