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

  <head>

    <meta charset="UTF-8" />
    <meta application-name="GeneNetwork Quality-Control Application" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {%block extrameta%}{%endblock%}

    <title>Data Upload and Quality Control: {%block title%}{%endblock%}</title>

    <link rel="stylesheet" type="text/css"
	  href="{{url_for('base.bootstrap',
                filename='css/bootstrap.min.css')}}" />
    <link rel="stylesheet" type="text/css"
          href="{{url_for('base.datatables',
                filename='css/dataTables.bootstrap5.min.css')}}" />
    <link rel="stylesheet" type="text/css" href="/static/css/styles.css" />

    {%block css%}{%endblock%}

  </head>

  <body>
    <header id="header">
      <span id="header-text">GeneNetwork</span>
      <nav id="header-nav">
        <ul class="nav justify-content-end">
          <li>
            {%if user_logged_in()%}
            <a href="{{url_for('oauth2.logout')}}"
               title="Log out of the system">
              <span class="glyphicon glyphicon-user"></span>
              Sign Out</a>
            {%else%}
            <a href="{{authserver_authorise_uri()}}"
               title="Log in to the system">Sign In</a>
            {%endif%}
          </li>
        </ul>
      </nav>
    </header>

    <aside id="nav-sidebar">
      <ul class="nav flex-column">
        <li {%if activemenu=="home"%}class="activemenu"{%endif%}>
          <a href="/" >Home</a></li>
        <li {%if activemenu=="species"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.list_species')}}"
             title="View and manage species information.">Species</a></li>
        <li {%if activemenu=="platforms"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.platforms.index')}}"
             title="View and manage species platforms.">Sequencing Platforms</a></li>
        <li {%if activemenu=="populations"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.populations.index')}}"
             title="View and manage species populations.">Populations</a></li>
        <li {%if activemenu=="samples"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.populations.samples.index')}}"
             title="Upload population samples.">Samples</a></li>
        <li {%if activemenu=="genotypes"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.populations.genotypes.index')}}"
             title="Upload Genotype data.">Genotype Data</a></li>
        <!--
            TODO: Maybe include menus here for managing studies and dataset or
            maybe have the studies/datasets managed under their respective
            sections, e.g. "Publish*" studies/datasets under the "Phenotypes"
            section, "ProbeSet*" studies/datasets under the "Expression Data"
            sections, etc.
          -->
        <li {%if activemenu=="phenotypes"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.populations.phenotypes.index')}}"
             title="Upload phenotype data.">Phenotype Data</a></li>
        <!--
        <li {%if activemenu=="expression-data"%}class="activemenu"{%endif%}>
          <a href="{{url_for('species.populations.expression-data.index')}}"
             title="Upload expression data."
             class="not-implemented">Expression Data</a></li>
        <li {%if activemenu=="individuals"%}class="activemenu"{%endif%}>
          <a href="#"
             class="not-implemented"
             title="Upload individual data.">Individual Data</a></li>
        <li {%if activemenu=="rna-seq"%}class="activemenu"{%endif%}>
          <a href="#"
             class="not-implemented"
             title="Upload RNA-Seq data.">RNA-Seq Data</a></li>
        <li {%if activemenu=="async-jobs"%}class="activemenu"{%endif%}>
          <a href="#"
             class="not-implemented"
             title="View and manage the backgroud jobs you have running">
            Background Jobs</a></li>
        -->
      </ul>
    </aside>

    <main id="main" class="main">

      <div id="pagetitle" class="pagetitle">
        <span class="title">Data Upload and Quality Control: {%block pagetitle%}{%endblock%}</span>
        <!--
            <nav>
              <ol class="breadcrumb">
                <li {%if activelink is not defined or activelink=="home"%}
                    class="breadcrumb-item active"
                    {%else%}
                    class="breadcrumb-item"
                    {%endif%}>
                  <a href="{{url_for('base.index')}}">Home</a>
                </li>
                {%block lvl1_breadcrumbs%}{%endblock%}
              </ol>
            </nav>
            -->
      </div>

      <div id="all-content">
        <div id="main-content">
          {%block contents%}{%endblock%}
        </div>
        <div id="sidebar-content">
          {%block sidebarcontents%}{%endblock%}
        </div>
      </div>
    </main>


    <!--
        Core dependencies
      -->
    <script src="{{url_for('base.jquery',
                 filename='jquery.min.js')}}"></script>
    <script src="{{url_for('base.bootstrap',
                 filename='js/bootstrap.min.js')}}"></script>

    <!--
        DataTables dependencies
      -->
    <script type="text/javascript"
            src="{{url_for('base.datatables',
                 filename='js/dataTables.min.js')}}"></script>
    <script type="text/javascript"
        src="{{url_for('base.datatables_extensions',
             filename='scroller/js/dataTables.scroller.min.js')}}"></script>
    <script type="text/javascript"
            src="{{url_for('base.datatables_extensions',
                 filename='buttons/js/dataTables.buttons.min.js')}}"></script>
    <script type="text/javascript"
            src="{{url_for('base.datatables_extensions',
                 filename='select/js/dataTables.select.min.js')}}"></script>

    <!--
        local dependencies
      -->
    <script type="text/javascript" src="/static/js/misc.js"></script>
    <script type="text/javascript" src="/static/js/datatables.js"></script>
    {%block javascript%}{%endblock%}
  </body>
</html>