{% extends "framework.html" %}

{% block content %}

  {% block action_modals %}
    {% include "modals/objects/edit_rule_modal.html" %}
    {% include "modals/objects/generic_set_aliases_modal.html" %}
    {% include "modals/objects/generic_set_scenario_modal.html" %}
    {% include "modals/objects/generic_copy_object_modal.html" %}
    {% include "modals/objects/generic_delete_modal.html" %}
  {% endblock action_modals %}

  <div class="panel-group" id="rule-detail">
    <div class="panel panel-default">
      <div
        class="panel-heading"
        id="headingPanel"
        style="font-size:2rem;height: 46px"
      >
        {{ rule.name|safe }}
        <div
          id="actionsButton"
          style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
          class="dropdown"
        >
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            ><span class="glyphicon glyphicon-wrench"></span> Actions
            <span class="caret"></span><span style="padding-right:1em"></span
          ></a>
          <ul id="actionsList" class="dropdown-menu">
            {% block actions %}
              {% include "actions/objects/rule.html" %}
            {% endblock %}
          </ul>
        </div>
      </div>
      <div class="panel-body">
        <p>{{ rule.description|safe }}</p>
      </div>

      {% if rule.aliases %}
        <!-- Aliases -->
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-aliases-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-aliases"
              >Aliases</a
            >
          </h4>
        </div>
        <div id="rule-aliases" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for alias in rule.aliases %}
              <a class="list-group-item">{{ alias }}</a>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- Representation -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="rule-image-link"
            data-toggle="collapse"
            data-parent="#rule-detail"
            href="#rule-image"
            >Image Representation</a
          >
        </h4>
      </div>
      <div id="rule-image" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          <div id="image-div" align="center">{{ rule.as_svg|safe }}</div>
        </div>
      </div>

      <!-- SMIRKS -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="rule-smirks-link"
            data-toggle="collapse"
            data-parent="#rule-detail"
            href="#rule-smirks"
            >SMIRKS Representation</a
          >
        </h4>
      </div>
      <div id="rule-smirks" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          <p>{{ rule.smirks }}</p>
        </div>
      </div>

      <!-- Reactants SMARTS -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="rule-reactants-smarts-link"
            data-toggle="collapse"
            data-parent="#rule-detail"
            href="#rule-reactants-smarts"
            >Reactant SMARTS</a
          >
        </h4>
      </div>
      <div id="rule-reactants-smarts" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          <p>{{ rule.reactants_smarts }}</p>
        </div>
      </div>

      <!-- Reactant Filter SMARTS -->
      {% if rule.reactant_filter_smarts %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-reactant-filter-smarts-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-reactant-filter-smarts"
              >Reactant Filter SMARTS</a
            >
          </h4>
        </div>
        <div
          id="rule-reactant-filter-smarts"
          class="panel-collapse in collapse"
        >
          <div class="panel-body list-group-item">
            <p>{{ rule.reactant_filter_smarts }}</p>
          </div>
        </div>
      {% endif %}

      <!-- Products SMARTS -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="rule-products-smarts-link"
            data-toggle="collapse"
            data-parent="#rule-detail"
            href="#rule-products-smarts"
            >Reactant SMARTS</a
          >
        </h4>
      </div>
      <div id="rule-products-smarts" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          <p>{{ rule.products_smarts }}</p>
        </div>
      </div>

      <!-- Product Filter SMARTS -->
      {% if rule.product_filter_smarts %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-product-filter-smarts-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-product-filter-smarts"
              >Product Filter SMARTS</a
            >
          </h4>
        </div>
        <div id="rule-product-filter-smarts" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            <p>{{ rule.product_filter_smarts }}</p>
          </div>
        </div>
      {% endif %}

      <!-- Included in Composite Rules -->
      {% if rule.parallelrule_set.all %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-composite-rule-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-composite-rule"
              >Included in Composite Rules</a
            >
          </h4>
        </div>
        <div id="rule-composite-rule" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for cr in rule.parallelrule_set.all %}
              <a class="list-group-item" href="{{ cr.url }}"
                >{{ cr.name|safe }}</a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- Scenarios -->
      {% if rule.scenarios.all %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-scenario-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-scenario"
              >Scenarios</a
            >
          </h4>
        </div>
        <div id="rule-scenario" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for s in rule.scenarios.all %}
              <a class="list-group-item" href="{{ s.url }}"
                >{{ s.name|safe }}</a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- Reactions -->
      {% if rule.related_reactions %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-reaction-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-reaction"
              >Reactions</a
            >
          </h4>
        </div>
        <div id="rule-reaction" class="panel-collapse collapse">
          <div class="panel-body list-group-item">
            {% for r in rule.related_reactions %}
              <a class="list-group-item" href="{{ r.url }}"
                >{{ r.name|safe }}</a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <!-- Pathways -->
      {% if rule.related_pathways %}
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-pathway-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-pathway"
              >Pathways</a
            >
          </h4>
        </div>
        <div id="rule-pathway" class="panel-collapse collapse">
          <div class="panel-body list-group-item">
            {% for r in rule.related_pathways %}
              <a class="list-group-item" href="{{ r.url }}"
                >{{ r.name|safe }}</a
              >
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if rule.enzymelinks %}
        <!-- EC Numbers -->
        <div
          class="panel panel-default panel-heading list-group-item"
          style="background-color:silver"
        >
          <h4 class="panel-title">
            <a
              id="rule-ec-numbers-link"
              data-toggle="collapse"
              data-parent="#rule-detail"
              href="#rule-ec-numbers"
              >EC Numbers</a
            >
          </h4>
        </div>
        <div id="rule-ec-numbers" class="panel-collapse in collapse">
          <div class="panel-body list-group-item">
            {% for k, v in rule.get_grouped_enzymelinks.items %}
              <div
                class="panel panel-default panel-heading list-group-item"
                style="background-color:silver"
              >
                <h4 class="panel-title">
                  <a
                    id="{{ k|slugify }}_Link"
                    data-toggle="collapse"
                    data-parent="#{{ k|slugify }}_Accordion"
                    href="#{{ k|slugify }}"
                  >
                    {{ k }}
                  </a>
                </h4>
              </div>
              <div id="{{ k|slugify }}" class="panel-collapse in collapse">
                <div class="panel-body list-group-item">
                  {% for enzyme in v %}
                    <a class="list-group-item" href="{{ enzyme.url }}">
                      {{ enzyme.ec_number }}
                      <div style="position:absolute;bottom:10px;left:100px;">
                        {{ enzyme.name }}
                      </div>
                      <div style="float:right;">
                        {{ enzyme.linking_method }}
                      </div>
                    </a>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock content %}