<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/climatemodeling/unified-dashboard@latest/dist/js/lmtud_bundle.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/climatemodeling/unified-dashboard@latest/dist/css/lmtud_bundle.min.css">
</head>
<body>
    <nav id="menu" class="menu">
      <a href="https://www.ilamb.org" target="_blank">
        <header class="menu-header">
          <span class="menu-header-title">Settings</span>
        </header>
      </a>
      <section class="menu-section">
         <div id="ck-button">
             <label>
                <input type="checkbox" name="colorblind" id="colorblind" class="mybtn" onchange="tableColor()" checked="true"><span>Colorblind colors</span>
             </label>
         </div>
      </section>
      <section class="menu-section">
          <select class="hide-list" id="hlist" name="states[]" multiple="multiple" style="width:75%"> </select>
      </section>
      <section class="menu-section">
          <select class="select-choice-x" id="select-choice-mini-x" style="width:75%"> <option></option></select>
          <select class="select-choice-y" id="select-choice-mini-y" style="width:75%"> <option></option></select>
      </section>
      <section class="menu-section">
          <select class="select-choice-1" id="select-choice-mini-0" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-2" id="select-choice-mini-1" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-3" id="select-choice-mini-2" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-4" id="select-choice-mini-3" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-5" id="select-choice-mini-4" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-6" id="select-choice-mini-5" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-7" id="select-choice-mini-6" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-8" id="select-choice-mini-7" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-9" id="select-choice-mini-8" style="width:75%; display:none"> <option></option></select>
          <select class="select-choice-9" id="select-choice-mini-9" style="width:75%; display:none"> <option></option></select>
      </section>
      <section class="menu-section">
          <h3 class="menu-section-title">Scaling</h3>
          <label class="el-checkbox el-checkbox-sm">
             <span class="margin-r">Row</span>
             <input type="checkbox" class="scarow" value='scarow' id="checkboxsca" checked>
             <span class="el-checkbox-style  pull-right"></span>
          </label>
          <label class="el-checkbox el-checkbox-sm">
             <span class="margin-r">Column</span>
             <input type="checkbox" class="scacol" value='scacol' id="checkboxsca">
             <span class="el-checkbox-style  pull-right"></span>
          </label>
          <select class="select-choice-sca" id="select-choice-mini-sca" style="width:75%">
             <option value="0" selected> Not normalized </option>
             <option value="1"> Normalized [x-mean(x)]/sigma(x) </option>
             <option value="2"> Normalized [-1:1] </option>
             <option value="3"> Normalized [ 0:1] </option>
          </select>
          <select class="select-choice-map" id="select-choice-mini-map" style="width:75%">
             <option value="0" selected> ILAMB color mapping </option>
             <option value="1"> Linear color mapping </option>
             <option value="2"> Linear color mapping reverse </option>
          </select>
      </section>
      <hr>
      <section class="menu-section">
          <h3 class="menu-section-title">Switch</h3>
          <label class="el-switch el-switch-sm">
              <input type="checkbox" name="switch" id="tooltips" onchange="toggleTooltips(true)" checked hidden>
              <span class="el-switch-style"></span>
              <span class="margin-r">Tooltips</span>
          </label>
          <label class="el-switch el-switch-sm">
              <input type="checkbox" name="switch" id="cellvalue" onchange="toggleCellValue(true)" hidden>
              <span class="el-switch-style"></span>
              <span class="margin-r">Cell Value</span>
          </label>
          <label class="el-switch el-switch-sm">
              <input type="checkbox" name="switch" id="bottomtitle" onchange="toggleBottomTitle(true)" hidden>
              <span class="el-switch-style"></span>
              <span class="margin-r">Bottom Title</span>
          </label>
          <label class="el-switch el-switch-sm">
              <input type="checkbox" name="switch" id="toptitle" onchange="toggleTopTitle(true)" checked hidden>
              <span class="el-switch-style"></span>
              <span class="margin-r">Top Title</span>
          </label>
          <label class="el-switch el-switch-sm">
              <input type="checkbox" name="switch" class="screenheight" id="screenheight" onchange="toggleScreenHeight(true)" checked hidden>
              <span class="el-switch-style"></span>
              <span class="margin-r">Screen Height</span>
          </label>
      </section>
      <hr>
      <section class="menu-section">
          <button type="button" onclick="expandCollapse('expand');" class="togglebutton">Row Expand/Collapse</button>
      </section>
      <hr>
      <section class="menu-section">
          <button type="button" onclick="savetoHtml();" class="togglebutton">Save to Html</button>
      </section>
    </nav>
    <main id="panel" class="panel">
      <header class="panel-header">
        <span id="sidemenuicon" class="js-slideout-toggle">&#9776&nbsp;Menu</span>
        <h1 class="title">{{page_title}}</h1>
      </header>
      <section style="text-align:center">
        <input name="file" id="file" type="file" onchange="loadlocJson()"/>
      </section>
      <section>
        <div class="tabDiv" id="mytab">
          <div id="dashboard-table"></div>
        </div>
        <center>
            <div class="legDiv">
            <p>Relative Scale
            <table class="table-header-rotated" id="scoresLegend">
              <tbody>
                <tr>
                  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
              </tbody>
            </table>
            Worse Value&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Better Value
            <table class="table-header-rotated" id="missingLegend">
              <tbody>
                <tr>
                  <td bgcolor="#808080"></td>
                </tr>
              </tbody>
            </table>Missing Data or Error
            </div>
        </center>
      </section>
    </main>
</body>
</html>
