enviPy-bayer/templates/objects/edge.html

{% extends "framework.html" %}

{% block content %}

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

  <div class="panel-group" id="edge-detail">
    <div class="panel panel-default">
      <div
        class="panel-heading"
        id="headingPanel"
        style="font-size:2rem;height: 46px"
      >
        {{ edge.edge_label.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/edge.html" %}
            {% endblock %}
          </ul>
        </div>
      </div>

      <!-- Description -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="edge-desc-link"
            data-toggle="collapse"
            data-parent="#edge-detail"
            href="#edge-desc"
            >Description</a
          >
        </h4>
      </div>
      <div id="edge-desc" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          {{ edge.description|safe }}
        </div>
      </div>

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

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

      <!-- Reaction Description -->
      <div
        class="panel panel-default panel-heading list-group-item"
        style="background-color:silver"
      >
        <h4 class="panel-title">
          <a
            id="edge-description-link"
            data-toggle="collapse"
            data-parent="#edge-description-detail"
            href="#edge-description-smiles"
            >Reaction Description</a
          >
        </h4>
      </div>
      <div id="edge-description-smiles" class="panel-collapse in collapse">
        <div class="panel-body list-group-item">
          {% for educt in edge.start_nodes.all %}
            <a class="btn btn-default" href="{{ educt.url }}"
              >{{ educt.name|safe }}</a
            >
          {% endfor %}
          <span
            class="glyphicon glyphicon-arrow-right"
            style="margin-left:5em;margin-right:5em;"
            aria-hidden="true"
          ></span>
          {% for product in edge.end_nodes.all %}
            <a class="btn btn-default" href="{{ product.url }}"
              >{{ product.name|safe }}</a
            >
          {% endfor %}
        </div>
      </div>

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

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

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