{% extends "base.html" %}

{% block content %}
<main class="lists">
  <div class="pet-list">
    <div>
      <a href="{{ url_for('.pet_detail') }}">New pet</a>
    </div>
    <ul>
      {% for pet in pets %}
        <li>
          <a href="{{ url_for('.pet_detail', id=pet.id) }}">
            {{ pet.name }}
          </a>
          <ul>
            {% for owner in pet.owners %}
              <li>{{ owner.last_name }}, {{ owner.first_name }}</li>
            {% endfor %}
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="owner-list">
    <div>
      <a href="{{ url_for('.owner_detail') }}">New owner</a>
    </div>
    <ul>
      {% for owner in owners %}
        <li>
          <a href="{{ url_for('.owner_detail', id=owner.id) }}">
            {{ owner.last_name }}, {{ owner.first_name }}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</main>
{% endblock %}