{% extends "framework_modern.html" %}

{% block content %}
  <div class="space-y-2 p-4">
    <!-- Header Section -->
    <div class="card bg-base-100">
      <div class="card-body">
        <h2 class="card-title text-2xl">{{ enzymelink.ec_number }}</h2>
      </div>
    </div>

    <!-- Enzyme Name -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">Enzyme Name</div>
      <div class="collapse-content">{{ enzymelink.name }}</div>
    </div>

    <!-- Linking Method -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">Linking Method</div>
      <div class="collapse-content">
        {{ enzymelink.linking_method }}. &nbsp;<a
          href="https://wiki.envipath.org/index.php/Rules#EnzymeLinks"
          target="_blank"
          class="link link-primary"
          >Learn more &gt;&gt;</a
        >
      </div>
    </div>

    {% if enzymelink.kegg_reaction_links %}
      <!-- Linking Evidence -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">Linking Evidence</div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for kl in enzymelink.kegg_reaction_links %}
              <li>
                <a href="{{ kl.external_url }}" class="hover:bg-base-200"
                  >{{ kl.identifier_value }}</a
                >
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    {% if enzymelink.reaction_evidence.all %}
      <!-- Linking Evidence - enviPath Reactions -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">
          Linking Evidence - enviPath Reactions
        </div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for r in enzymelink.reaction_evidence.all %}
              <li>
                <a href="{{ r.url }}" class="hover:bg-base-200"
                  >{{ r.name }} <i>({{ r.package.name }})</i></a
                >
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    {% if enzymelink.edge_evidence.all %}
      <!-- Linking Evidence - enviPath Pathways -->
      <div class="collapse-arrow bg-base-200 collapse">
        <input type="checkbox" checked />
        <div class="collapse-title text-xl font-medium">
          Linking Evidence - enviPath Pathways
        </div>
        <div class="collapse-content">
          <ul class="menu bg-base-100 rounded-box">
            {% for e in enzymelink.edge_evidence.all %}
              <li>
                <a href="{{ e.pathway.url }}" class="hover:bg-base-200"
                  >{{ e.pathway.name }} <i>({{ e.pathway.package.name }})</i></a
                >
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

    <!-- External DB References -->
    <div class="collapse-arrow bg-base-200 collapse">
      <input type="checkbox" checked />
      <div class="collapse-title text-xl font-medium">
        External DB References
      </div>
      <div class="collapse-content">
        <a
          href="http://www.brenda-enzymes.org/enzyme.php?ecno={{ enzymelink.ec_number }}"
          target="_blank"
          class="link link-primary"
          >Brenda entry for {{ enzymelink.ec_number }}</a
        >
      </div>
    </div>
  </div>
{% endblock content %}