{% extends "framework.html" %}

{% block content %}
  <div>
    <form action="" method="post">
      {% csrf_token %}
      <input
        type="text"
        class="form-control"
        id="smiles"
        name="smiles"
        placeholder="SMILES"
        value="{{ smiles }}"
      />
      <input
        type="text"
        class="form-control"
        id="smiles"
        name="smirks"
        placeholder="SMIRKS"
        value="{{ smirks }}"
      />
      <button type="submit" class="btn btn-primary">Test</button>
    </form>
  </div>
  {% if result %}
    {{ smiles }}
    <p></p>
    <img
      width="400"
      src="{% url 'depict' %}?smiles={{ smiles|urlencode }}"
    /><br />
    <p></p>
    {% if rule %}
      {{ smirks }}
      <p></p>
      {{ rule.reactants_smarts }}
      <p></p>
      {{ rule.products_smarts }}
      <p></p>
      <div>{{ rule.as_svg|safe }}</div>
    {% endif %}
    <h2>Diff</h2>
    {% if diff %}
      {% for d in diff %}
        {{ d }}
      {% endfor %}
    {% else %}
      {{ "No diff" }}
    {% endif %}
    <div>
      <div class="col-md-6">
        <h2>Ambit</h2>
        {% for p in ambit_res %}
          {{ p }}<br />
          <img
            width="400"
            src="{% url 'depict' %}?smiles={{ p|urlencode }}"
          /><br />
        {% endfor %}
      </div>

      <div class="col-md-6">
        <h2>RDKit</h2>
        {% for p in rdkit_res %}
          {{ p }}<br />
          <img
            width="400"
            src="{% url 'depict' %}?smiles={{ p|urlencode }}"
          /><br />
        {% endfor %}
      </div>
    </div>
  {% endif %}
{% endblock content %}
