{% extends "base.html" %}
{% block title %}BLAST検索{% endblock %}
{% block style %}
    label {
      display: block;
      margin-top: 1em;
      font-weight: bold;
    }
    textarea, input[type="text"], input[type="number"], select {
      width: 100%;
      box-sizing: border-box;
      padding: 0.6em;
      margin-top: 0.3em;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-family: inherit;
    }
    textarea {
      font-family: monospace;
    }
    fieldset {
      margin-top: 1.5em;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      padding: 0 1em 1em;
    }
    legend {
      font-weight: bold;
      color: #1d4ed8;
      padding: 0 0.3em;
    }
    .row {
      display: flex;
      gap: 1em;
    }
    .row > div {
      flex: 1;
    }
    .actions {
      margin-top: 2em;
    }
    @media (max-width: 600px) {
      body { padding: 1em; }
      .panel { padding: 1em; }
      .row { flex-direction: column; gap: 0; }
    }
{% endblock %}
{% block content %}
  {% if error %}
    <div class="error">{{ error }}</div>
  {% endif %}

  {% set form = request.form %}
  <form class="panel" method="post" enctype="multipart/form-data">
    <label for="sequence">Query sequence (FASTA or raw sequence; multiple FASTA entries allowed)</label>
    <textarea id="sequence" name="sequence" rows="10" placeholder=">query1&#10;ATGCGT...">{{ form.sequence or '' }}</textarea>

    <label for="query_file">or upload a FASTA file</label>
    <input type="file" id="query_file" name="query_file" accept=".fa,.fasta,.fas,.fna,.faa,.txt">

    <div class="row">
      <div>
        <label for="program">BLAST+ program</label>
        <select id="program" name="program">
          {% for prog, types in programs.items() %}
            <option value="{{ prog }}" data-db-type="{{ types[1] }}" {% if form.program == prog %}selected{% endif %}>{{ prog }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label for="database">Database</label>
        <select id="database" name="database">
          {% for db in db_choices %}
            <option value="{{ db.name }}" data-type="{{ db.type }}" {% if form.database == db.name %}selected{% endif %}>
              {{ db.name }}{% if db.title and db.title != db.name %} ({{ db.title }}){% endif %} [{{ 'protein' if db.type == 'prot' else 'nucleotide' }}]
            </option>
          {% endfor %}
        </select>
      </div>
    </div>

    <fieldset>
      <legend>Search parameters</legend>
      <div class="row">
        <div>
          <label for="evalue">E-value</label>
          <input type="text" id="evalue" name="evalue" value="{{ form.evalue or '1e-5' }}">
        </div>
        <div>
          <label for="max_target_seqs">Max target seqs</label>
          <input type="number" id="max_target_seqs" name="max_target_seqs" min="1" value="{{ form.max_target_seqs or '50' }}">
        </div>
      </div>

      <div class="row">
        <div id="task-field">
          <label for="task">Task</label>
          <select id="task" name="task">
            <option value="">-- Default --</option>
            {% for prog, prog_tasks in tasks.items() %}
              {% for t in prog_tasks %}
                <option value="{{ t }}" data-program="{{ prog }}" {% if form.task == t %}selected{% endif %}>{{ t }}</option>
              {% endfor %}
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="word_size">Word size</label>
          <input type="number" id="word_size" name="word_size" min="2" placeholder="default" value="{{ form.word_size or '' }}">
        </div>
      </div>

      <div class="row">
        <div id="matrix-field">
          <label for="matrix">Score matrix</label>
          <select id="matrix" name="matrix">
            <option value="">-- Default --</option>
            {% for mat in matrices %}
              <option value="{{ mat }}" {% if form.matrix == mat %}selected{% endif %}>{{ mat }}</option>
            {% endfor %}
          </select>
        </div>
        <div id="strand-field">
          <label for="strand">Query strand</label>
          <select id="strand" name="strand">
            {% for value, label in [('', 'Both'), ('plus', 'Plus'), ('minus', 'Minus')] %}
              <option value="{{ value }}" {% if form.strand == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="filter">Low complexity filter</label>
          <select id="filter" name="filter">
            {% for value, label in [('', 'Default'), ('yes', 'On'), ('no', 'Off')] %}
              <option value="{{ value }}" {% if form.filter == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <label for="extra_args">Additional options</label>
      <input type="text" id="extra_args" name="extra_args" value="{{ form.extra_args if form.extra_args is defined else default_extra_args }}">
      <div class="muted">e.g. <code>-gapopen 5 -gapextend 2</code>. Options touching files or output format are not allowed.</div>
    </fieldset>

    <div class="actions">
      <input class="button" type="submit" value="BLAST">
      <input class="button secondary" type="reset" value="Reset">
    </div>
  </form>

  <script>
    // Show only the databases, tasks and options that fit the selected program
    (function () {
      var matrixPrograms = {{ matrix_programs | tojson }};
      var strandPrograms = {{ strand_programs | tojson }};
      var program = document.getElementById('program');
      var database = document.getElementById('database');
      var task = document.getElementById('task');

      function filterSelect(select, keep) {
        var current = select.options[select.selectedIndex];
        Array.prototype.forEach.call(select.options, function (opt) {
          var show = keep(opt);
          opt.hidden = !show;
          opt.disabled = !show;
        });
        if (current && current.disabled) {
          var first = Array.prototype.find.call(select.options, function (o) { return !o.disabled; });
          if (first) select.value = first.value;
        }
      }

      function update() {
        var prog = program.value;
        var dbType = program.options[program.selectedIndex].dataset.dbType;
        filterSelect(database, function (o) { return o.dataset.type === dbType; });
        filterSelect(task, function (o) { return !o.value || o.dataset.program === prog; });
        document.getElementById('matrix-field').style.display = matrixPrograms.indexOf(prog) >= 0 ? '' : 'none';
        document.getElementById('strand-field').style.display = strandPrograms.indexOf(prog) >= 0 ? '' : 'none';
        document.getElementById('task-field').style.display = task.querySelector('option[data-program="' + prog + '"]') ? '' : 'none';
      }

      program.addEventListener('change', update);
      document.querySelector('form').addEventListener('reset', function () { setTimeout(update, 0); });
      update();
    })();
  </script>
{% endblock %}