<div class="terpene-details">
    <div class="heading">
      <span>Detailed terpene predictions</span> {{ help_tooltip(tooltip, "terpene-body") }}
    </div>
    {% for cluster, prediction in preds_by_cluster.items() %}
      <div class="protocluster-pred">
      {% if preds_by_cluster | length > 1 %}
        <div>
          <span class="cluster-header"> Terpene cluster {{ loop.index }}</span>
          ({{ "{:,d}".format(cluster.location.start) }} - {{ "{:,d}".format(cluster.location.end) }}):</span>
        </div>
      {% endif %}
        <div class="products">
        <div class="section-header">Product predictions:</div>
          <div class="section-body">
        {% if prediction.products %}
            <table class="product-table">
              <thead>
                <tr>
                  <th>Class</th>
                  <th>Subclass</th>
                  <th>Product name</th>
                  <th>Chain length</th>
                  <th>Initial cyclisations</th>
                  <th>Functional groups</th>
                </tr>
              </thead>
              <tbody>
                {% for product in prediction.products %}
                <tr>
                  <td>{{ product.biosynthetic_class }}</td>
                  <td>{{ product.biosynthetic_subclass }} </td>
                  <td>{{ product.get_compound_name() }}</td>
                  <td>C{{ product.chain_length }}</td>
                  <td>{{ product.get_cyclisations_description() }}</td>
                  <td>{{ product.get_functional_groups_description() }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
        {% else %}
            No product predictions
        {% endif %}
          </div>
        </div>
        <div class="domains">
        <span class="section-header"> Genes with terpene domains: </span>
          <div class="domain-list">
            {% if prediction.cds_predictions.items() %}
            {% for cds, domain_preds in prediction.cds_predictions.items() %}
              <div>
              {{ cds_selector_span(cds, ["section-header"]) }}: {{ format_domain_types(domain_preds) }}
              {{collapser_start(target=cds, level="cds")}}
              {% for pred in domain_preds %}
               <div>
                <strong>Domain {{ loop.index }}</strong>
                  ({{ "{:,d}".format(pred.start+1)}}  - {{ "{:,d}".format(pred.end) }}): {{ get_domain_description(pred) }}
                {% if format_subtype(pred) != "none" or pred.reactions %}
                  {{collapser_start(cds, level="cds")}}
                  <div class="domain-details">
                    {% if format_subtype(pred) != "none" %}
                    <span> Subtype:</span> {{ format_subtype(pred) }}<br>
                    {% endif %}
                    {% if pred.reactions %}
                    <dl class="reactions">
                    <dt> Reactions:</dt>
                    {{ format_reactions(pred) }}
                    </dl>
                    {% endif %}
                  </div>
                  {{collapser_end()}}
                {% endif %}
               </div>
              {% endfor %}
              {{collapser_end()}}
             </div>
            {% endfor %}
            {% else %}
              No domains found
            {% endif %}
          </div>
          </div>
      </div>
    {% endfor %}
</div>
