<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="google" content="notranslate">
    <title>{{'GTGT analysis results for ' + variant if variant else 'Genetic Therapy Generator Toolkit'}}</title>
    <link href="https://cdn.jsdelivr.net/npm/beercss@3.9.6/dist/cdn/beer.min.css" rel="stylesheet">
    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.6/dist/cdn/beer.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
    <script type="text/javascript">
      function activate_info() {
        // set all pages to inactive
        let pages = Array.from(document.getElementsByClassName('page'))
        for (index in pages) {
          let element = pages[index];
          element.classList.remove('active');
        }

        // set all information pages (help, github, disclaimer) to active
        let page_names = ['disclaimer', 'documentation', 'github'];
        for (index in page_names) {
          let element = document.getElementById(page_names[index]);
          element.classList.add('active');
        }

        // unset the selected color from the nav menu
        let nav_elements = Array.from(document.querySelectorAll('nav a'));
          for (index in nav_elements) {
            let element = nav_elements[index];
            element.classList.remove('active');
          }
      }
    </script>
    <script>
      function redirect()
      {
        var url = document.getElementById('test').value
        window.location = "/" + url
      }

      // Also trigger submit when the user presses enter in the text field
      document.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) { //13 is enter}
          event.preventDefault();
          redirect();
        }
      });
    </script>
  </head>
  <body>
    <nav class="left drawer l">
      <header>
        <nav>
          <img src="https://lirp.cdn-website.com/335a66d0/dms3rep/multi/opt/logo+small-1920w.png" class="circle">
          <h6>GTGT</h6>
        </nav>
      </header>
      <a data-ui="#home">
        <i>search</i>
        <div>Search</div>
      </a>
      <a data-ui="#analysis">
        <i>genetics</i>
        <div>Analysis</div>
      </a>
      <a data-ui="#external-resources">
        <i>database</i>
        <div>External resources</div>
      </a>
      <a data-ui="#export-report">
        <i>picture_as_pdf</i>
        <div>Export report</div>
      </a>
      <div class="divider"></div>
      <label>Background</label>
      <a data-ui="#documentation">
        <i>description</i>
        <div>Help</div>
      </a>
      <a data-ui="#github">
        <i>terminal</i>
        <div>Github</div>
      </a>
      <a data-ui="#disclaimer">
        <i>copyright</i>
        <div>Disclaimer</div>
      </a>
    </nav>

    <nav class="left m">
      <a data-ui="#home">
        <i>search</i>
        <div>Search</div>
      </a>
      <a data-ui="#analysis">
        <i>genetics</i>
        <div>Analysis</div>
      </a>
      <a data-ui="#external-resources">
        <i>database</i>
        <div>External resources</div>
      </a>
      <a data-ui="#export-report">
        <i>picture_as_pdf</i>
        <div>Export report</div>
      </a>
      <div class="divider"></div>
      <a data-ui="#documentation">
        <i>description</i>
        <div>Help</div>
      </a>
      <a data-ui="#github">
        <i>terminal</i>
        <div>Github</div>
      </a>
      <a data-ui="#disclaimer">
        <i>copyright</i>
        <div>Disclaimer</div>
      </a>
    </nav>

    <nav class="bottom s">
      <a data-ui="#home">
        <i>search</i>
      </a>
      <a data-ui="#analysis">
        <i>genetics</i>
      </a>
      <a data-ui="#external-resources">
        <i>database</i>
      </a>
      <a data-ui="#export-report">
        <i>picture_as_pdf</i>
      </a>
      <a onclick="activate_info()">
        <i>info</i>
      </a>
    </nav>

    <main class="responsive">

      {% if results is defined %}
        <div id="home" class="page padding">
      {% else %}
        <div id="home" class="page padding active">
      {% endif %}
          <h2>Specify variant</h2>
          <p>Welcome to the Genetic Therapy Generator Toolkit, please specify a variant below:</p>
          <div class="field border round small">
            <input id="test" type="text" {{'value=' + variant if variant else ''}} autofocus>
            <button class="center" type="button" onclick="redirect()">Submit</button>
          </div>
        </div>

      {% if results is defined %}
        <div id="analysis" class="page padding active">
          <h2> Analysis results for {{ variant }}</h2>
          {% for name in results %}
            <article>
              <details>
                <summary class="none">
                  <div class="row">
                    <div class="max">
                      <h3>{{ name }}</h3>
                    </div>
                    <i>arrow_drop_down</i>
                  </div>
                </summary>
                <table>
                  <thead>
                    <tr>
                      <th>Annotation</th>
                      <th>Remaining</th>
                      <th>Percentage</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for fieldname in results[name] %}
                    {% set value = (results[name][fieldname] * 100) | round(precision=1) %}
                    <tr>
                      <td>{{ fieldname }}</td>
                      <td>{{ value }}% </td>
                      <td><progress value="{{value}}" max="100"></progress></td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </details>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div id="analysis" class="page padding">
          <h2> Analysis results for {{ variant }}</h2>
          Please specify a variant to analyze.
        </div>
      {% endif %}

      <div id="external-resources" class="page padding">
        <h2>External resources</h2>
        {% if links is defined %}
          <div class="grid">
            {% for dbname, link in links.items() %}
              <div class="s12 m6 l3">
                <a href={{ link }} target="_blank">
                  <article>
                    <h5>{{ dbname | upper}}</h5>
                    <p>This is a description of the {{ dbname }} database</p>
                  </article>
                </a>
              </div>
            {% endfor %}
          </div>
        {% else %}
        Please specify a variant to discover links to external resources.
        {% endif %}
      </div>

      <div id="export-report" class="page padding">
        <h2>Export report</h2>
        <p>Here will be an option to export the report, either as a stand alone html page or a PDF document</p>
      </div>

      <div id="documentation" class="page padding">
        <h2>Help</h2>
        <p>The documentation for this website is still under construction.</p>
        <p>The technical documentation for this tool can be found on <a class="link" href=https://gtgt.readthedocs.io/en/latest/>https://gtgt.readthedocs.io</a>.
      </div>

      <div id="github" class="page padding">
        <h2>Development</h2>
        <p>The Genetic Therapy Generator Toolkit is a tool developed by the DCRT</p>
        <p>The source code is available on <a class="link" href=https://github.com/DCRT-LUMC/GTGT>Github</a>.
      </div>

      <div id="disclaimer" class="page padding">
        <h2>Disclaimer</h2>
        <p>Copyright© 2023 LUMC <a class="link" href=https://www.lumc.nl>https://www.lumc.nl</a></p>
        <p>This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
        <p>This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.</p>
        <p>By accessing and using the program in any manner (including copying, modifying or redistributing the program), you accept and agree to the applicability of the GNU Affero General Public License. You can find and read this license on GNU Affero General Public License - GNU Project - Free Software Foundation.</p>
      </div>
    </main>
  </body>
</html>

