{% load availability_percentage %}
<div class="card mx-2 shadow-sm" style="min-width: 320px;max-width: 375px;">
  <div class="row m-0 p-2">
    <div class="col">
      <div>
        <span class="h4"><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></span>
        <h6 class="text-muted mb-2">
          {{ event.data.start_date|date:"D, F j, g:i A" }}<br>
          {{ event.data.location_name }}
        </h6>
      </div>
      {% if not event.data.results %}
      <div>
        <div class="progress">
          <div class="progress-bar bg-success fw-bold" role="progressbar" style="width: {% availability_percentage availability_summary 'player_going' %}%">{{ availability_summary.data.player_going_count }}</div>
          <div class="progress-bar bg-info fw-bold" role="progressbar" style="width: {% availability_percentage availability_summary 'player_maybe' %}%">{{ availability_summary.data.player_maybe_count }}</div>
          <div class="progress-bar bg-danger fw-bold" role="progressbar" style="width: {% availability_percentage availability_summary 'player_not_going' %}%" >{{ availability_summary.data.player_not_going_count }}</div>
          <div class="progress-bar text-secondary fw-bold" role="progressbar" style="width: {% availability_percentage availability_summary 'player_unknown' %}%;background-color:#e9ecef;">{{ availability_summary.data.player_unknown_count }}</div>
        </div>
      </div>
      {% endif %}
      {% if event.data.results %}
      <div>
        <span class="h4">{{ event.data.formatted_results }}</span>
      </div>
      {% endif %}
      <hr/>
      <div class="d-flex">
        <a class="card-link m-auto" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
          <i class="bi bi-clipboard"></i>
        </a>
        <a class="card-link m-auto" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}" target="_blank" rel="noopener noreferrer">
          <i class="bi bi-book"></i>
        </a>
        <a class="card-link m-auto"
              href="{% url 'instagen' team_id=event.data.team_id event_id=event.data.id %}">
          <i class="bi bi-instagram"></i>
        </a>
        <a class="card-link m-auto"
              href="{% url 'teamsnap_event_redirect' team_id=event.data.team_id event_id=event.data.id %}" target="_blank" rel="noopener noreferrer">
          <i class="bi bi-asterisk"></i>
        </a>
      </div>
    </div>

  </div>
</div>