{% if compound_structure.pes_link %}
  <!-- PES -->
  <div class="collapse-arrow bg-base-200 collapse">
    <input type="checkbox" checked />
    <div class="collapse-title text-xl font-medium">Link to PES</div>
    <div class="collapse-content">
      <p>
        <a href="{{ compound_structure.pes_link }}" class="hover:bg-base-200">{{ compound_structure.pes_link }}</a>
      </p>
    </div>
  </div>

  <!-- Image Representation -->
  <div class="collapse-arrow bg-base-200 collapse">
    <input type="checkbox" checked />
    <div class="collapse-title text-xl font-medium">PES Image Representation</div>
    <div class="collapse-content">
      <div class="flex justify-center">
        <img src='{% url 'depict_pes' %}?pesLink={{ compound_structure.pes_link|urlencode }}'/>
      </div>
    </div>
  </div>
{% endif %}