{% extends "base.html" %}
{% block title %}Opponents{% endblock %}
{% block pre_container %}{% include 'page-heading.html' with title="Opponents"%}{% endblock %}
{% block content %}
  <table class="table bg-white">
    <thead>
    <tr>
      <th>
        Team Name
      </th>
      <th>
        Logo
      </th>
      <th>
        Monocolor Logo
      </th>
    </tr>
    </thead>
    <tbody>
    {% for ts_opponent, opponent in object_list %}
      <tr>
        <th>
          <a class="text-decoration-none" href="{% url 'teamsnap_opponent' team_id=team_id opponent_id=opponent.id %}">
          {{ ts_opponent.data.name }}
            </a>
        </th>
        <td>
          {% if opponent.logo %}
            <div class="rounded-circle bg-light p-2" style="height:64px;width:64px;">
            <img class="img-fluid" src="{{ opponent.logo.url }}">
            </div>
          {% endif %}
        </td>
        <td>
          {% if opponent.logo_mono %}
            <div class="rounded-circle bg-dark p-2" style="height:64px;width:64px;">
            <img class="img-fluid" src="{{ opponent.logo_mono.url }}">
            </img>
          {% endif %}
        </td>

      </tr>
    {% empty %}
      <li>No opponents yet.</li>
    {% endfor %}
    </tbody>
  </table>
{% endblock content %}