<div id="wrapper">

  <div class="helper-text" v-if="!genes.length">
    <p>No genes to display</p>
  </div>

  <div class="genes-found" title="Total number of genes found" v-show="genes.length">
    <span>Genes found</span>
    <span class="badge">{{ genes.length }}</span>
  </div>

  <div class="genes-selected" v-if="selectedDots.length">
    <span>Genes selected</span>
    <span class="badge">{{ selectedDots.length }}</span>
  </div>

  <div class="copy-button" v-show="genes.length">
    <el-button type="primary" @click="clipboard" title="Copy the list of genes below to your clipboard">
      <i class="el-icon-copy-document el-icon-left"></i>
      Copy to clipboard
    </el-button>
  </div>

  <div class="genes-filter" v-show="genes.length">
    <el-input v-model="filter" prefix-icon="el-icon-search" spellcheck="false" placeholder="Find a gene..." title="Filter the current list of genes"></el-input>
  </div>

  <div class="genes-pagination" v-show="genes.length">
    <el-button type="primary" @click="prevPage" circle title="Previous genes">
      <i class="el-icon-arrow-left"></i>
    </el-button>
    <span>{{ currentPage }} / {{ totalPages || 1 }}</span>
    <el-button type="primary" @click="nextPage" circle title="Next genes">
      <i class="el-icon-arrow-right"></i>
    </el-button>
  </div>

  <div class="genes-list" v-show="genes.length">
    <ul>
      <li class="gene-item" v-for="gene in paginatedGenes">
        <div class="gene-item-label" :class="{ 'gene-hover': hoveredGene === gene.Gene }" @click="selectGene(gene)" @mouseenter="hoverGene(gene.Gene)" @mouseleave="hoverGene('')">
          <span>{{ gene.Gene }}</span>
          <i class="el-icon-caret-bottom" v-show="selectedGene !== gene.Gene && hoveredGene === gene.Gene"></i>
          <i class="el-icon-caret-top" v-show="selectedGene === gene.Gene"></i>
        </div>

        <ul class="gene-item-list" v-show="selectedGene === gene.Gene">
          <li>
            <a :class="{ disabled: !gene.Variants }" @click="openVariants(gene)" role="buttton" target="_blank" title="View this gene on OMIM in a new tab">
              <span>Show variants</span>
            </a>
          </li>
          <li>
            <span @click="showBrainGene(gene, 'specificity')" title="Show the specificity levels of this gene in the 3D brain">Brain specificity</span>
          </li>
          <li>
            <span @click="showBrainGene(gene, 'expression')" title="Show the expression levels of this gene in the 3D brain">Brain expression</span>
          </li>
          <li>
            <span @click="downloadFasta(gene, 'DNA')" title="Download the DNA sequences in FASTA for this gene">Download DNA</span>
          </li>
          <li>
            <span @click="downloadFasta(gene, 'PROT')" title="Download the protein sequences in FASTA for this gene">Download protein</span>
          </li>
          <li>
            <a :href="ncbiLink(gene.EntrezId)" rel="external noreferrer" target="_blank" title="View this gene on NCBI in a new tab">
              <span>See on NCBI</span>
            </a>
          </li>
          <li>
            <a :href="ensemblLink(gene.EnsemblId)" rel="external noreferrer" target="_blank" title="View this gene on Ensembl in a new tab">
              <span>See on Ensembl</span>
            </a>
          </li>
          <li>
            <a :href="biogpsLink(gene.EntrezId)" rel="external noreferrer" target="_blank" title="View this gene on BioGPS in a new tab">
              <span>See on BioGPS</span>
            </a>
          </li>
          <li>
            <a :href="gtexLink(gene.Gene)" rel="external noreferrer" target="_blank" title="View this gene on GTEx in a new tab">
              <span>See on GTEx</span>
            </a>
          </li>
          <li>
            <a :href="gene2pheno(gene.Gene)" rel="external noreferrer" target="_blank" title="View this gene on gene2phenotype in a new tab">
              <span>See on gene2pheno</span>
            </a>
          </li>
          <li>
            <a :href="dbd(gene.Gene)" rel="external noreferrer" target="_blank" title="View this gene on the Developmental Brain Disorder Genes Database in a new tab">
              <span>See on DBD</span>
            </a>
          </li>
          <li>
            <a :class="{ disabled: !gene.MimId }" :href="omimLink(gene.MimId)" rel="external noreferrer" target="_blank" title="View this gene on OMIM in a new tab">
              <span>See on OMIM</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>
