{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<div id="breedingPairs">
  {% if selected_monster %}
  <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
  <div class="grid grid-cols-2 gap-1">
    <div class="col-span-1">
      <h3 class="text-lg font-bold">Base</h3>
      <ul>
        {% for pair in selected_monster.base_pair %}
        <li
          id="parent"
          class="text-center cursor-pointer hover:text-red-700 w-fit"
        >
          <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
        </li>
        {% endfor %}
      </ul>
    </div>
    <div class="col-span-1">
      <h3 class="text-lg font-bold">Mates</h3>
      <ul>
        {% for pair in selected_monster.mate_pair %}
        <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
          <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endblock %}