{% extends "base.html" %}
{% from 'bootstrap4/form.html' import render_form, render_field %}

{% block app_content %}

<div class="container">
   <div class="row">
       <div class="col-6">

            <br>
            <h4> Model Data Browser</h4>
            <nav aria-label="...">
               <ul class="pager">
               <li class="model">
                  <a href="{{ url_for('main.models') }}"> List Models </a>
               </li>
               <li class="nodes">
                  <a href="{{ url_for('main.entities',entities='nodes') }}"> List Nodes </a>
               </li>
               <li class="properties">
                  <a href="{{ url_for('main.entities',entities='properties') }}"> List Properties </a>
               </li>
               <li class="terms">
                  <a href="{{ url_for('main.entities',entities='terms') }}"> List Terms </a>
               </li>
               <li class="origins">
                  <a href="{{ url_for('main.entities',entities='origins') }}"> List Origins </a>
               </li>
            </ul>
            </nav> 
         <br>
      </div>

<div class="col-6">
   <br>
   <h4> External Resources</h4>
   <ul class="pager">

      <li class="evs">
         <a href="https://evsexplore.semantics.cancer.gov/">EVS Explore</a> (NCI Thesaurus, Metathesaurus)</a>
      </li>
      <li class="cadsr">
         <a href="https://cadsr.cancer.gov/onedata/Home.jsp">NCI caDSR</a> (CDEs)
      </li>
      <li class="umls">
         <a href="https://www.nlm.nih.gov/research/umls/index.html">UMLS</a>
      </li>
      </ul>
   </div>

</div>
</div>

<ul class="nav nav-tabs" id="aboutTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="about-sts-tab" data-toggle="tab" href="#about_sts" role="tab" aria-controls="home" aria-selected="true">About STS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="about-mdb-tab" data-toggle="tab" href="#about_mdb" role="tab" aria-controls="profile" aria-selected="false">About MDB</a>
  </li>
</ul>
<div class="tab-content" id="aboutTabContent" style="overflow: scroll; height: 250px">
  <div class="tab-pane fade show active" id="about_sts" role="tabpanel" aria-labelledby="about-sts-tab">
    {% include 'about-sts.html' %}
  </div>
  <div class="tab-pane fade" id="about_mdb" role="tabpanel" aria-labelledby="about-mdb-tab">
    {% include 'about-mdb.html' %}
  </div>
</div>
{% endblock %}
