<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="icon" href="assets/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">

    <title>DataLad Catalog</title>

    <!-- Required Stylesheets -->
    <link rel="stylesheet" type="text/css" href="assets/style.css"/>
    <link rel="stylesheet" type="text/css" href="assets/fontawesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/brands.min.css"/>
    <link type="text/css" rel="stylesheet" href="assets/bootstrap.5.1.3.min.css"/>
    <link type="text/css" rel="stylesheet" href="assets/bootstrap-vue.2.21.2.min.css"/>

    <!-- Required scripts -->
    <script src="assets/vue.2.6.14.min.js"></script>
    <script src="assets/bootstrap-vue.2.21.2.min.js"></script>
    <script src="assets/vue-router.3.5.3.min.js"></script>
    <script src="assets/md5-2.3.0.js"></script>
    <script src="assets/marked.4.0.17.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

    <!-- Template for recursive tree item -->
    <script type="text/x-template" id="item-template">
      <li>
        <div :class="{bold: isFolder}" @click="toggle">
          <span v-if="isFolder && isOpen"> <i class="far fa-folder-open"></i> {{ displayText }}</span>
          <span v-else-if="isFolder && !isOpen"> <i class="far fa-folder"></i> {{ displayText }}</span>
          <span v-else-if="isDataset"> <i class="fas fa-database"></i> <a class="subdataset" @click="selectDataset(item, item.id)">{{ displayText }}</a></span>
          <!-- <span v-else> <i class="far fa-file-alt"></i> {{ displayText }} <span v-show="downloadURL"><a class="xsm-dl-button" :href="downloadURL" :download="displayText"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></span><span class="filesize"><i class="fa fa-eye" aria-hidden="true"></i>{{byteText}}</span> </span> -->
          <span v-else> <i class="far fa-file-alt"></i> {{ displayText }} <span class="filesize"><span v-show="downloadURL"><a class="xsm-dl-button" :href="downloadURL" :download="displayText"><i class="fas fa-cloud-download" aria-hidden="true"></i></a></span>{{byteText}}</span> </span>
        </div>
        <ul v-show="isOpen" v-if="isFolder">
          <tree-item class="item" v-for="(child, index) in item.children" :key="index" :index="index" :item="child"></tree-item>
        </ul>
      </li>
    </script>

    <!-- Template for main page -->
    <script type="text/x-template" id="main-template">
      <div>
        <br>
        <h2 class="text-center">Browse datasets</h2>
        <b-card border-variant="dark" v-for="sds in superdatasets" class="mb-2 p-0">
          <b-card-body>
            <b-row no-gutters align-v="center">
              <b-col md="9">
                <b-card-title><a @click="selectDataset(sds, sds.dataset_id)" class="stretched-link">{{sds.name}}</a></b-card-title>
                <b-card-sub-title class="mb-2">
                  <span v-for="(author, index) in sds.authors">{{author.givenName}} {{author.familyName}}<span v-if="index != sds.authors.length - 1">, </span></span>
                </b-card-sub-title>
                <b-card-text>
                  <strong>Version:</strong> {{sds.dataset_version.substring(0,7)}}&nbsp;
                  <strong>Modified:</strong> {{sds.last_edited}}&nbsp;
                  <strong>DOI:</strong>
                    <span v-if="sds.doi"><a :href="sds.doi" target="_blank">{{sds.doi.replace("https://doi.org/", "")}}</a></span>
                    <span v-else><em>not available</em></span>&nbsp;
                  <strong>License:</strong> <a :href="sds.license.url" target="_blank">{{sds.license.name}}</a>&nbsp;
                </b-card-text>
              </b-col>
              <b-col md="3">
                <b-card-text>
                  <b-button pill disabled size="sm" variant="outline-dark" v-for="keyword in sds.keywords">{{keyword}}</b-button>
                </b-card-text>
              </b-col>
            </b-row>
          </b-card-body>
        </b-card>
      </div>
    </script>


    <!-- Template for dataset page -->
    <script type="text/x-template" id="dataset-template">
      <div v-if="display_ready">
        <b-card border-variant="dark">
          <!-- TOP SECTION -->
          <b-card-body>
            <!-- DATASET TITLE -->
            <b-card-title>
              <span><a @click="gotoHome" class="newlink"><i class="fas fa-home"></i></a>{{displayData.display_name}}</span>
            </b-card-title>
            <!-- DATASET AUTHORS -->
            <b-card-sub-title class="mb-2">
              <span v-for="(author, index) in selectedDataset.authors"><span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != selectedDataset.authors.length - 1">, </span></span>
            </b-card-sub-title>
            <!-- DATASET VERSION ETC -->
            <b-card-text>
              <strong>Version:</strong> {{selectedDataset.dataset_version.substring(0,7)}}&nbsp;
              <strong>Metadata extracted:</strong> {{displayData.metadata_extracted}}&nbsp;
              <strong>DOI:</strong> <span v-if="selectedDataset.doi"><a :href="selectedDataset.doi" target="_blank"> {{selectedDataset.doi.replace("https://doi.org/", "")}}</a></span>
              <span v-else><em>not available</em></span>&nbsp;
              <strong>License:</strong> <span v-if="selectedDataset.license && selectedDataset.license.name"><a :href="selectedDataset.license.url" target="_blank"> {{selectedDataset.license.name}}</a></span>
              <span v-else><em>not available</em></span>
            </b-card-text>
            <!-- DATASET BUTTONS -->
            <div style="text-align: left;">
              <span v-show="displayData.url"><b-button variant="outline-dark" size="sm" v-b-modal.modal-1>
                <img src="data:image/png;base64, "
                alt="datalad_d" height="15em" class="mb-1"/>
                Download with DataLad</b-button>&nbsp;</span>
              <span v-show="displayData.is_github"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><i class="fab fa-github"></i> View on GitHub</b-button>&nbsp;</span>
              <span v-show="selectedDataset.doi"><b-button variant="outline-dark" size="sm" v-b-modal.modal-2 @click="getCitationText(selectedDataset.doi)"><i class="fas fa-quote-right"></i> Cite</b-button>&nbsp;</span>
              <b-button variant="outline-dark" size="sm" :href="displayData.file_path" :download="displayData.download_filename"><i class="fas fa-share"></i> Export metadata</b-button>&nbsp;
              <span v-show="displayData.is_github"><b-button variant="outline-dark" size="sm" @click="openWithBinder(displayData.url)"><img src="data:image/png;base64, "
                alt="binder_logo" height="16em" class="mb-1">Explore with Binder</b-button></span>
              <b-modal id="modal-1" size="lg" 
              header-bg-variant="light"
              footer-bg-variant="light"
              body-bg-variant="light"
              body-text-variant="dark"
              ok-only>
                <template #modal-header="{ close }">
                  <div class="d-block text-center">
                    <h3>Download with <img src="artwork/datalad_logo_wide.svg" width="100em"></h3>
                  </div>
                </template>
                <h5>Step 1: Install DataLad</h5>
                <p class="my-4">Make sure that you have a recent version of DataLad installed on your system.
                  Full instructions are provided in the
                  <a href="http://handbook.datalad.org/en/latest/intro/installation.html#install">DataLad Handbook.</a>
                </p>
                <h5>Step 2: Clone the dataset</h5>
                <p class="my-4">The dataset can be cloned by running:</p>
                <div class="shadow-sm p-3 mb-3 bg-white rounded">
                  <b-row>
                    <b-col cols="11">
                      <code id="clone_code">
                        datalad clone {{displayData.url}}
                      </code>
                    </b-col>
                    <b-col cols="1">
                      <i id="copyBtn" class="far fa-clone" @click="copyCloneCommand"></i>
                      <b-tooltip target="copyBtn" :show.sync="showCopyTooltip" @shown="hideTooltipLater" triggers left title="Copied!">
                      </b-tooltip>
                    </b-col>
                  </b-row>
                </div>
                <p class="my-4">Once the dataset is cloned, it is a light-weight directory on your local machine.
                  At this point, it contains only small metadata and information on the identity of the files in the dataset,
                  but not actual content of the (sometimes large) data files.
                </p>
                <h5>Step 3: Retrieve dataset content</h5>
                <p class="my-4">After cloning the dataset, you can retrieve file contents by running:</p>
                <div class="shadow-sm p-3 mb-3 bg-white rounded">
                  <code>
                    datalad get path/to/directory/or/file
                  </code>
                </div>
                <p class="my-4">This command will trigger a download of the files, directories, or subdatasets you have specified.</p>
              </b-modal>
              <b-modal id="modal-2" size="lg" 
              header-bg-variant="light"
              footer-bg-variant="light"
              body-bg-variant="light"
              body-text-variant="dark"
              ok-only>
                <template #modal-header="{ close }">
                  <div class="d-block text-center">
                    <h3>Cite dataset</h3>
                  </div>
                </template>
                <b-spinner v-if="citation_busy" variant="warning" type="grow" style="text-align:center;">Firing up the citation minions...</b-spinner>
                <div v-if="selectedDataset.citation_text" class="shadow-sm p-3 mb-3 bg-white rounded">
                  <b-row>
                    <b-col cols="11">
                      <code id="citation">
                        {{selectedDataset.citation_text}}
                      </code>
                    </b-col>
                    <b-col cols="1">
                      <i id="copyBtnCite" class="far fa-clone" @click="copyCitationText"></i>
                      <b-tooltip target="copyBtnCite" :show.sync="showCopyCiteTooltip" @shown="hideCiteTooltipLater" triggers left title="Copied!">
                      </b-tooltip>
                    </b-col>
                  </b-row>
                </div>
                <span v-show="invalid_doi"><em>Invalid DOI</em></span>
              </b-modal>
            </div>
            <hr>
            <!-- DATASET DESCRIPTION, KEYWORDS, PROPERTIES -->
            <b-row no-gutters>
              <b-col md="9" style="text-align: justify;">
                <b-card-text>
                  <strong>Description:</strong>
                  <span v-if="displayData.description && Array.isArray(displayData.description) && displayData.description.length>0 ">
                    <b-button-group><span v-for="desc in displayData.description"><b-button id="xsm-button" size="sm" variant="outline-dark" @click="selectDescription(desc)">{{desc.source}}</b-button>&nbsp;</span></b-button-group><br>
                    <span v-html="description_display"></span>
                  </span>
                  <span v-else>{{selectedDataset.description}}</span>
                </b-card-text>
              </b-col>
              <b-col md="3">
                <b-card-text>
                  <strong>Keywords:</strong> <br>
                  <b-button pill disabled size="sm" variant="outline-dark" v-for="keyword in selectedDataset.keywords">{{keyword}}</b-button>
                </b-card-text>
                <span v-if="selectedDataset.top_display && selectedDataset.top_display.length">
                  <b-card-text>
                    <strong>Properties:</strong> <br>
                    <span v-for="display_property in selectedDataset.top_display"><b-button disabled size="sm" variant="outline-dark">{{display_property.name}}: {{display_property.value}}</b-button>&nbsp;</span>
                  </b-card-text>
                </span>
              </b-col>
            </b-row>
          </b-card-body>
          <!-- BOTTOM SECTION WITH TABS-->
          <b-card-body>
            <b-tabs card content-class="mt-3" fill active-nav-item-class="font-weight-bold" v-model="tabIndex">
              <!-- SUBDATASETS -->
              <b-tab>
                <template v-slot:title>
                  <i class="fas fa-list-ol"></i> Subdatasets
                </template>
                <span v-if="subdatasets_ready">
                  <span v-if="!sortedSubdatasets || !sortedSubdatasets.length"><em>There are no subdatasets listed for the current dataset</em></span>
                  <span v-else>
                    <b-form>
                      <b-row>
                        <b-col md="7">
                          <b-input-group>
                          <b-button-group>
                            <b-button pill variant="outline-dark" @click="sortByName">
                              <span v-if="sort_name"><i class="fas fa-sort-amount-down-alt"></i></span>
                              <span v-else><i class="fas fa-sort-amount-up-alt"></i></span>
                              Name
                            </b-button>&nbsp;
                            <b-button pill variant="outline-dark" @click="sortByModified">
                              <span v-if="sort_modified"><i class="fas fa-sort-amount-down-alt"></i></span>
                              <span v-else><i class="fas fa-sort-amount-up-alt"></i></span>
                              Modifed
                            </b-button>
                          </b-button-group>&nbsp;&nbsp;
                          <b-form-input id="input-1" type="search" placeholder="Search by dataset or author name" required v-model="search_text" ref="text_search_input"></b-form-input>
                        </b-input-group>
                        
                        </b-col>
                        <b-col md="5">
                          <b-input-group>
                            <b-form-tags v-model="search_tags" :tag-validator="validator" no-outer-focus class="border-0 p-0">
                              <template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag}">
                                <b-input-group class="mb-1">
                                  <b-form-input
                                    v-bind="inputAttrs"
                                    v-model="tag_text"
                                    v-on="inputHandlers"
                                    placeholder="Search by keyword (select or press enter to add)"
                                    class="form-control"
                                    ref="tag_search_input"
                                    @input="inputTagText()"
                                    v-on:keyup.enter="clearSearchTagText()"
                                  ></b-form-input>
                                </b-input-group>
                                <div class="d-inline-block" style="font-size: 1.5rem;">
                                  <span v-for="tag in tags" :key="tag"><b-button pill size="sm" class="p-1" variant="outline-dark" @click="removeSearchTag(tag)">{{tag}} <i class="fas fa-times-circle"></i></b-button>&nbsp;</span>
                                </div>
                              </template>
                            </b-form-tags>
                            <template #append>
                              <b-button variant="outline-dark" id="popover-target-1">Keywords</b-button>
                              <b-popover target="popover-target-1" triggers="hover" :show.sync="popoverShow" placement="auto" ref="popover">
                                <div v-if="tags_ready">
                                  <span v-if="tag_options_filtered.length == 0"><em>No tags found</em></span>
                                  <span v-else v-for="option in tag_options_filtered"><b-button pill size="sm" class="p-1" variant="outline-dark" @click="addSearchTag(option)">{{option}}</b-button>&nbsp;</span>
                                </div>
                              </b-popover>
                            </template>
                          </b-input-group>
                        </b-col>
                      </b-row>
                    </b-form>
                    <br>
                    <b-card v-for="ds in sortedSubdatasets" border-variant="dark" header-bg-variant="transparent" no-body class="mb-2 pt-1">
                      <template v-slot:header>
                        <b-row no-gutters>
                          <b-col align-h="center" align-v="center" md="1">
                            <span class="xxlfont"><i class="fas fa-database"></i></span>
                          </b-col>
                          <b-col class="text-muted" md="7">
                            <h5><a @click="console.log('fromhtml'); console.log(ds); selectDataset(ds)" class="stretched-link">{{ds.dirs_from_path.at(-1)}}</a></h5>
                            <span v-for="(author, index) in ds.authors">
                              <small>
                                <span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != ds.authors.length - 1">, </span>
                              </small>
                            </span>
                            <b-card-text>
                              <small>
                                <strong>Version:</strong> {{ds.dataset_version.substring(0,7)}}&nbsp;
                                <strong>Modified:</strong> {{getDateFromUTCseconds(ds.extraction_time)}}&nbsp;
                              </small>
                            </b-card-text>
                          </b-col>
                          <b-col md="4">
                            <b-card-text>
                              <span v-for="keyword in ds.keywords"><b-button pill disabled size="sm" class="p-1" variant="outline-dark">{{keyword}}</b-button>&nbsp;</span>
                            </b-card-text>
                          </b-col>
                        </b-row>
                      </template>
                    </b-card>
                  </span>
                </span>
              </b-tab>
              <!-- FILE TREE -->
              <b-tab @click="getFiles">
                <template v-slot:title>
                  <i class="far fa-folder"></i> Files
                </template>
                <span v-if="!selectedDataset.tree || !selectedDataset.tree.length"><em>There are no files listed for the current dataset</em></span>
                <span v-else>
                  <b-card no-body class="p-2">
                    <span v-if="files_ready">
                      <ul>
                        <tree-item class="item" v-for="item in selectedDataset.tree" :item="item"></tree-item>
                      </ul>
                    </span>
                    <span v-else>
                      <div class="d-flex justify-content-center mb-3">
                        <b-spinner label="Loading..."></b-spinner>
                      </div>
                    </span>
                  </b-card>
                </span>
                <b-modal id="modal-3" size="md"
                header-bg-variant="light"
                footer-bg-variant="light"
                body-bg-variant="light"
                body-text-variant="dark"
                ok-only
                >
                  <template #modal-header="{ close }">
                    <div class="d-block text-center">
                      <h3>Dataset not found</h3>
                      <p class="my-4">The selected dataset is currently not available in the catalog.</p>
                    </div>
                  </template>
                </b-modal>
              </b-tab>
              <!-- PUBLICATIONS -->
              <span v-if="selectedDataset.publications && selectedDataset.publications.length">
                <b-tab>
                  <template v-slot:title>
                    <i class="fas fa-book"></i> Publications
                  </template>
                  <span v-if="!selectedDataset.publications || !selectedDataset.publications.length"><em>There are no publications listed for the current dataset</em></span>
                  <span v-else v-for="pub in selectedDataset.publications">
                    <b-card border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
                      <template v-slot:header>
                        <b-row no-gutters>
                          <b-col align-h="center" align-v="center" md="1">
                            <span class="xxlfont"><i class="fas fa-book "></i></span>
                          </b-col>
                          <b-col class="text-muted" md="8">
                            <h5>{{pub.title}}</h5>
                            <small>
                              <span v-for="(author, index) in pub.authors"><span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != pub.authors.length - 1">, </span></span>
                            </small><br>
                          </b-col>
                          <b-col md="3">
                            <small>
                              Published: {{pub.datePublished}} <br>
                              DOI: <span v-if="pub.doi"><a :href="pub.doi" target="_blank">{{pub.doi.replace("https://doi.org/", "")}}</a></span> <br>
                              Journal: {{pub.publicationOutlet}}
                            </small>
                          </b-col>
                        </b-row>
                      </template>
                    </b-card>
                  </span>
                </b-tab>
              </span>
              <!-- FUNDING -->
              <span v-if="selectedDataset.funding && selectedDataset.funding.length">
                <b-tab>
                  <template v-slot:title>
                    <i class="fas fa-dollar-sign"></i> Funding
                  </template>
                  <span v-if="!selectedDataset.funding || !selectedDataset.funding.length"><em>There are no funding sources listed for the current dataset</em></span>
                  <span v-else v-for="fund in selectedDataset.funding">
                    <b-card border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
                      <template v-slot:header>
                        <b-row no-gutters>
                          <b-col align-h="center" align-v="center" md="1">
                            <span class="xxlfont"><i class="fas fa-dollar-sign "></i></span>
                          </b-col>
                          <b-col class="text-muted" md="11">
                            <h5><span v-if="fund.name">{{fund.name}}</span><span v-else><em>(fund name missing)</em></span></h5>
                            <small><strong>Grant identifier:</strong> {{fund["identifier"]}}<br><strong>Description:</strong> {{fund["description"]}}</small><br>
                          </b-col>
                          </b-col>
                        </b-row>
                      </template>
                    </b-card>
                  </span>
                </b-tab>
              </span>
              <!-- PROVENANCE -->
              <span v-if="selectedDataset.provenance && selectedDataset.provenance.length">
                <b-tab>
                  <template v-slot:title>
                    <i class="fas fa-laptop-code"></i> Provenance
                  </template>
                  <span v-if="!selectedDataset.provenance || !selectedDataset.provenance.length"><em>There are no provenance records listed for the current dataset</em></span>
                  <span v-else v-for="record in selectedDataset.provenance">
                    <b-container>
                      <b-row>
                        <b-col>
                          <b-card header-bg-variant="transparent" >
                            <template v-slot:header>
                              <b-row no-gutters>
                                <b-col align-h="center" align-v="center" md="3">
                                  <span class="lfont"><i class="fas fa-database"></i></span>
                                </b-col>
                                <b-col align-h="center" align-v="center" md="9">
                                  <span><a @click="selectDataset(null, selectedDataset.dataset_id, record.previous_version)" class="newlink"><span class="lfont">Dataset:  <em>before</em></span></a></span>
                                </b-col>
                              </b-row>
                              
                            </template>
                            <b-card-text class="text-muted">
                              <small>
                                <strong>ID: </strong>{{selectedDataset.dataset_id.slice(0,7)}}...<br>
                                <strong>Version: </strong>{{record.previous_version.slice(0,7)}}...<br>
                              </small>
                            </b-card-text>
                            <b-card-text >
                              <small>
                                <strong>Inputs: </strong>{{record.inputs}}<br>
                              </small>
                            </b-card-text>
                          </b-card>

                        </b-col>
                        <b-col cols="1"></b-col>

                        <b-col cols="5">
                          <b-card border-variant="dark">
                            <template v-slot:header class="text-center">
                                <b-card-title class="text-center"><i class="fas fa-terminal"></i>&nbsp;&nbsp;run-record</strong></b-card-title>
                                <!-- <span class="lfont"><i class="fas fa-terminal"></i>  run-record</strong></span> -->
                            </template>
                            <b-card-text class="text-center" >
                              <small>
                                <span class="text-muted"><i class="fas fa-code-commit"></i> {{record.dataset_version}}</span>
                              </small>
                            </b-card-text>
                            
                            <b-card-text class="border rounded p-2">
                              {{record.description}}
                            </b-card-text>
                            <b-card-text >
                              <small>
                                <strong>&nbsp;Command: </strong><br>
                                <div class="shadow p-3 mb-3 bg-white rounded">
                                  <b-row>
                                    <b-col cols="11">
                                      <code id="command_code">
                                        {{record.cmd}}
                                      </code>
                                    </b-col>
                                    <b-col cols="1">
                                    </b-col>
                                  </b-row>
                                </div>
                                <!-- <code>{{record.cmd}}</code> -->
                              </small>
                            </b-card-text>
                            <template v-slot:footer>
                              <b-row no-gutters>
                                <b-col >
                                  <span class="lfont"><i class="fas fa-user-check"></i></span>&nbsp;&nbsp;{{record.author.name}}
                                </b-col>
                                <b-col align-h="right">
                                  <small>{{record.datetime}}</small>
                                </b-col>
                              </b-row>
                            </template>
                          </b-card>
                        </b-col>
                        <b-col cols="1"></b-col>
                        <b-col>
                          <b-card header-bg-variant="transparent" >
                            <template v-slot:header>
                              <b-row no-gutters>
                                <b-col align-h="center" align-v="center" md="3">
                                  <span class="lfont"><i class="fas fa-database"></i></span>
                                </b-col>
                                <b-col align-h="center" align-v="center" md="9">
                                  <span><a @click="selectDataset(null, selectedDataset.dataset_id, record.dataset_version)" class="newlink"><span class="lfont">Dataset:  <em>after</em></span></a></span>
                                </b-col>
                              </b-row>
                              
                            </template>
                            <b-card-text class="text-muted">
                                  <small>
                                    <strong>ID: </strong>{{selectedDataset.dataset_id.slice(0,7)}}...<br>
                                    <strong>Version: </strong>{{record.dataset_version.slice(0,7)}}...<br>
                                  </small>
                            </b-card-text>
                            <b-card-text >
                              <small>
                                <strong>Outputs: </strong>{{record.outputs}}<br>
                              </small>
                            </b-card-text>
                            
                            
                          </b-card>

                        </b-col>
                      </b-row>
                    </b-container>
                    <br>
                    <hr class="mb-5 pb-1">
                  </span>
                </b-tab>
              </span>
              <!-- EXTRA TABS -->
              <span v-if="selectedDataset.additional_display && selectedDataset.additional_display.length">
                <span v-for="new_tab in selectedDataset.additional_display">
                  <b-tab>
                    <template v-slot:title>
                      <span v-if="new_tab.icon"><i :class="new_tab.icon"></i></span><span v-else><i class="fas fa-bars"></i></span> {{new_tab.name}}
                    </template>
                    <span v-if="!new_tab.content"><em>No available content for this display option</em></span>
                    <span v-else>

                      <table class="table table-striped">
                        <thead>
                          <tr>
                            <th>Property</th>
                            <th>Value(s)</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="content_key in Object.keys(new_tab.content)">
                             <td><strong>{{ content_key.charAt(0).toUpperCase() + content_key.slice(1) }}</strong></td> 
                             <td>{{ new_tab.content[content_key] }}</td>  
                          </tr>
                         </tbody>
                      </table>
                      <!-- <b-card border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
                        <b-card-text>{{content_key.charAt(0).toUpperCase() + content_key.slice(1)}}: {{new_tab.content[content_key]}}</b-card-text>
                      </b-card> -->
                    </span>
                  </b-tab>
                </span>
              </span>
            </b-tabs>
          </b-card-body>
        </b-card>
      </div>
    </script>
  </head>

  <!-- ### -->
  <!-- ### -->
  <!-- ### -->
  <body id="mainbody">
    <!-- Our application root element -->
    <b-container id="demo" >
      <b-container style="margin-top:20px;">
        <b-row align-v="end">
          <b-col cols="9">
            <span v-show="logo_path"><a @click="gotoHome"><img :src="logo_path" class="d-inline-block" alt="datalad" style="width:100%;"></a></span>
          </b-col>
          <b-col cols="1"></b-col>
          <b-col cols="2" align-h="end">
            <b-navbar toggleable="lg" type="light" variant="outline-dark">
          
              <b-navbar-toggle target="navbar-toggle-collapse">
              </b-navbar-toggle>
              <b-collapse id="navbar-toggle-collapse" is-nav>
                <b-navbar-nav class="ml-auto mb-0 xlfont">
                  <b-nav-item v-b-tooltip.hover title="About" @click="gotoAbout"><i class="fas fa-info-circle"></i></b-nav-item>
                  <b-nav-item v-b-tooltip.hover title="Read documentation" @click="gotoExternal('docs')"><i class="fas fa-file-alt"></i></b-nav-item>
                  <b-nav-item v-b-tooltip.hover title="View code base" @click="gotoExternal('github')"><i class="fab fa-github"></i></b-nav-item>
                  <b-nav-item v-b-tooltip.hover title="Follow DataLad!" @click="gotoExternal('twitter')"><i class="fab fa-twitter"></i></b-nav-item>
                </b-navbar-nav>
              </b-collapse>
            </b-navbar>
          </b-col>
        </b-row>
      </b-container>
      <br>
      <div>
        <!-- route outlet -->
        <!-- component matched by the route will render here -->
        <router-view :selected-dataset="selectedDataset"></router-view>
      </div> 
    </b-container>

    <b-container>
      <br>
      <br>
      <br>
      <br>
    </b-container>

    <!-- Start running your app -->
    <script src="assets/vue_app.js"></script>
    <script>mermaid.initialize({ startOnLoad: true });</script>
  </body>
</html>
