{% extends "framework.html" %}

{% block content %}
  <div class="panel-group" id="enzyme-detail">
    <div class="panel panel-default">
      <div
        class="panel-heading"
        id="headingPanel"
        style="font-size:2rem;height: 46px"
      >
        {{ enzymelink.ec_number }}
      </div>

      <!-- Name -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="enzyme-name-link"
            data-toggle="collapse"
            data-parent="#enzyme-detail"
            href="#enzyme-name"
            >Enzyme Name</a
          >
        </h4>
      </div>
      <div id="enzyme-name" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">{{ enzymelink.name }}</div>
      </div>

      <!-- Linking Method -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="enzyme-linking-link"
            data-toggle="collapse"
            data-parent="#enzyme-detail"
            href="#enzyme-linking"
            >Linking Method</a
          >
        </h4>
      </div>
      <div id="enzyme-linking" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          {{ enzymelink.linking_method }}. &nbsp;<a
            href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks"
            target="#"
            >Learn more &gt;&gt;</a
          >
        </div>
      </div>

      {% if enzymelink.kegg_reaction_links %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="enzyme-evidence-link"
              data-toggle="collapse"
              data-parent="#enzyme-detail"
              href="#enzyme-evidence"
              >Linking Evidence</a
            >
          </h4>
        </div>
        <div id="enzyme-evidence" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for kl in enzymelink.kegg_reaction_links %}
              <a class="list-group-item" href="{{ kl.external_url }}"
                >{{ kl.identifier_value }}</a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if enzymelink.reaction_evidence.all %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="enzyme-reaction-evidence-link"
              data-toggle="collapse"
              data-parent="#enzyme-detail"
              href="#enzyme-reaction-evidence"
              >Linking Evidence - enviPath Reactions</a
            >
          </h4>
        </div>
        <div id="enzyme-reaction-evidence" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for r in enzymelink.reaction_evidence.all %}
              <a class="list-group-item" href="{{ r.url }}"
                >{{ r.name }} <i>({{ r.package.name }})</i></a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if enzymelink.edge_evidence.all %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="enzyme-edge-evidence-link"
              data-toggle="collapse"
              data-parent="#enzyme-detail"
              href="#enzyme-edge-evidence"
              >Linking Evidence - enviPath Pathways</a
            >
          </h4>
        </div>
        <div id="enzyme-edge-evidence" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for e in enzymelink.edge_evidence.all %}
              <a class="list-group-item" href="{{ e.pathway.url }}"
                >{{ e.pathway.name }} <i>({{ r.package.name }})</i></a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- External DB Reference -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="enzyme-external-identifier-link"
            data-toggle="collapse"
            data-parent="#enzyme-detail"
            href="#enzyme-external-identifier"
            >External DB References</a
          >
        </h4>
      </div>
      <div id="enzyme-external-identifier" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          <a
            class="list-group-item"
            href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ enzymelink.ec_number }}"
            target="_blank"
          >
            Brenda entry for {{ enzymelink.ec_number }}</a
          >
        </div>
      </div>
    </div>
  </div>
{% endblock content %}