<header>
  <div class="container">
    <ol class="breadcrumb">
      <li>Edge</li>
      <li><a href="#/genomes">Genomes</a></li>
      <li>
        <a href="#/genomes/{{ genome.id }}"
          ><span class="fs-block" ng-bind-html="genome.name"></span
        ></a>
      </li>
      <li>PCR</li>
    </ol>
  </div>
</header>

<div class="container">
  <h3>
    PCR on Genome {{ genome.id }}:
    <span class="fs-block" ng-bind-html="genome.name"></span>
  </h3>

  <form role="form" class="space-top">
    <div class="form-inline">
      Primers
      <div class="form-group">
        <input
          required
          class="form-control"
          type="text"
          ng-model="primer_a"
          size="40"
        />
      </div>
      and
      <div class="form-group">
        <input
          required
          class="form-control"
          type="text"
          ng-model="primer_b"
          size="40"
        />
      </div>
      <button class="btn btn-primary" ng-click="Pcr(primer_a, primer_b)">
        PCR
      </button>
    </div>
  </form>

  <div ng-if="results" class="space-top">
    <div ng-if="results[0]">
      <p>
        <span class="label label-success"
          >PCR Product: {{ results[0].length }} bps</span
        >
      </p>
      <div class="sequence sequence-break">{{ results[0] }}</div>
      <p>
        Genomic region amplified:
        <a
          class="fs-block"
          href="#/genomes/{{ genome.id }}/fragments/{{ results[3].fragment_id }}?bp={{ results[3].region[0] }},{{ results[3].region[1] }}"
          >{{ results[3].fragment_name }} {{ results[3].region[0] }}-{{
          results[3].region[1] }}</a
        >
      </p>
    </div>

    <div ng-if="!results[0]">
      <p>
        <span class="label label-danger"
          >Cannot compute PCR product. Too many or too few binding sites.</span
        >
      </p>
    </div>

    <partial
      template="blast-results"
      ng-init="blast_results=results[1].concat(results[2])"
    ></partial>
  </div>
</div>
