{% extends "bootstrap/base.html" %}

{% block styles %}
  {{ super() }}
  <!-- PILEUP CSS -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pileup/0.6.9/pileup.css">
{% endblock %}

{% block content %}
  <div id="pileup-viewer"></div>
{% endblock %}

{% block scripts %}
  {{ super() }}

  <!-- PILEUP JS-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pileup/0.6.9/pileup.min.js"></script>

  <script type="text/javascript" charset="utf-8">
      var div = document.getElementById('pileup-viewer');
      var p = pileup.create(div, {
        range: { contig: '{{ position.contig }}', start: {{ position.start }}, stop: {{ position.stop }} },
        tracks: [
          {
            viz: pileup.viz.genome(),
            isReference: true,
            data: pileup.formats.twoBit({
              {% if genome %}
                url: '{{ url_for("alignviewers.remote_static", file=genome) }}'
              {% else %}
                url: 'https://www.biodalliance.org/datasets/hg19.2bit'
              {% endif %}
            }),
            name: 'Reference'
          },
          {
            viz: pileup.viz.scale(),
            name: 'Scale'
          },
          {
            viz: pileup.viz.location(),
            name: 'Location'
          },
          {
            viz: pileup.viz.genes(),
            data: pileup.formats.bigBed({
              {% if exons %}
                url: '{{ url_for("alignviewers.remote_static", file=exons) }}'
              {% else %}
                url: 'https://www.biodalliance.org/datasets/ensGene.bb'
              {% endif %}
            }),
            name: 'Genes'
          },
          {% if vcf_file %}
            {
              viz: pileup.viz.variants(),
              data: pileup.formats.vcf({
                url: '{{ url_for("alignviewers.remote_static", file=vcf_file) }}'
              }),
              name: 'Variants'
            },
          {% endif %}
          {% for alignment in alignments %}
            {
              viz: pileup.viz.coverage(),
              data: pileup.formats.bam({
                url: '{{ url_for("alignviewers.remote_static", file=alignment.bam) }}',
                indexUrl: '{{ url_for("alignviewers.remote_static", file=alignment.bai) }}'
              }),
              name: 'Coverage'
            },
            {
              viz: pileup.viz.pileup({
                  viewAsPairs: true
              }),
              data: pileup.formats.bam({
                url: '{{ url_for("alignviewers.remote_static", file=alignment.bam) }}',
                indexUrl: '{{ url_for("alignviewers.remote_static", file=alignment.bai) }}'
              }),
              cssClass: 'normal',
              name: '{{ alignment.sample }}'
            },
          {% endfor %}
        ]
      });
  </script>
{% endblock %}
