{% load static %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="{% static 'css/gamecard.css' %}">
  <title>Title</title>
</head>
<body class="b5">
<section class="sheet">
  <div class="whole-card">
    <div class="half-card">
      <div class="content card-left">
        <table>
          <thead>
          <tr>
            <th colspan="8" class="gametitle">
              {{ event.data.formatted_title }} {{ event.data.start_date|date:'m/d/Y g:i A' }}
              {#                    G#01 at Browns 05/01/2021 12:30 PM#}
            </th>
            <th class="homeaway" colspan="4">{{ event.data.game_type }}</th>
          </tr>
          </thead>
        </table>
        <table class="lineup">
          <thead>
          <tr>
            <th class="cell-square">
            </th>
            <th class="customcol">
            </th>
            <th class="cell-square">
            </th>
            <th class="cell-square">
            </th>
            {% for inning in '1234567X' %}
              <th class="cell-square">{{ inning }}
              </th>
            {% endfor %}
          </tr>
          </thead>
          <tbody>
          {% for member in members_startinglineup %}
            <tr>
              <td class="cell-square cell-smalltext cell-mono">{{ member.lineup_entry.sequence | add:"1" }}</td>
              <td class="customcol">{{ member.member.last_name }}</td>
              <td class="cell-square cell-smalltext">{{ member.member.jersey_number }}</td>
              <td class="cell-square cell-smalltext cell-mono">{{ member.lineup_entry.label }}</td>
              {% for inning in '1234567X' %}
                <td class="cell-square"></td>
              {% endfor %}
            </tr>
          {% endfor %}
          </tbody>
        </table>
        <table class="lineup">
          <tbody>
          {% for member in members_startingpositiononly %}
            <tr>
              <td class="cell-square"></td>
              <td class="">{{ member.member.last_name }}</td>
              <td class="cell-square cell-smalltext">{{ member.member.jersey_number }}</td>
              <td class="cell-square cell-smalltext cell-mono">{{ member.lineup_entry.label }}</td>
              {% for inning in '1234567X' %}
                <td class="cell-square"></td>
              {% endfor %}
            </tr>
          {% endfor %}
          {% for member in members_bench %}
            <tr>
              <td class="cell-square"></td>
              <td class="">{{ member.member.last_name }}</td>
              <td class="cell-square cell-smalltext">{{ member.member.jersey_number }}</td>
              <td class="cell-square cell-smalltext cell-mono">{{ member.lineup_entry.label }}</td>
              {% for inning in '1234567X' %}
                <td class="cell-square"></td>
              {% endfor %}
            </tr>
          {% endfor %}
          {% for _ in blankrows_lineup %}
            <tr>
              <td class="cell-square"></td>
              <td class="">{{ member.member.last_name }}</td>
              <td class="cell-square cell-smalltext">{{ member.member.jersey_number }}</td>
              <td class="cell-square cell-smalltext cell-mono">{{ member.lineup_entry.label }}</td>
              {% for inning in '1234567X' %}
                <td class="cell-square"></td>
              {% endfor %}
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <div class="half-card">
      <div class="content card-right">
        <div style="width:100%">
          <table class="">
            <thead>
            <tr>
              <th class="cell-square"></th>
              <th class="cell-square"></th>
              <th class="condensedNameCell">Available</th>
              <th class="statscell">AVG/OBP/SLG:PA</th>
              <th class="cell-square cell-smalltext narrow">P</th>
              <th class="cell-square cell-smalltext narrow">C</th>
              <th class="cell-square cell-smalltext narrow">IF</th>
              <th class="cell-square cell-smalltext narrow">OF</th>
              {% for event in events_future %}
                <th class="cell-square cell-smalltext cell-condensed narrow">
                  <span class="day-of-the-week">{{ event.data.start_date|date:'D' }}</span>
                </th>
              {% endfor %}
              {% for event in events_past %}
                <th class="cell-square cell-smalltext cell-condensed narrow">
                  <span class="day-of-the-week">{{ event.data.start_date|date:'D' }}</span>
                </th>
              {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for member in members %}

              <tr>
                <td class="cell-square"></td>
                <td class="cell-square cell-smalltext cell-mono available-status-code-{{ member.availability.status_code }} {% if member.in_starting_lineup %}in-starting-lineup{% endif %}">{{ member.member.jersey_number }}</td>
                <td class="cell-info-lastname available-status-code-{{ member.availability.status_code }} {% if member.in_starting_lineup %}in-starting-lineup{% endif %}">{{ member.member.last_name }}</td>
                <td class="statscell">
                {{ member.stats.offensive.AVG }}/{{ member.stats.offensive.OBP }}/{{ member.stats.offensive.SLG }}:{{ member.stats.offensive.PA }}
              </td>

                <td class="cell-square cell-checkbox narrow no-inside-border">
                  {% if "P" in member.member.position %}
                    <i class="bi bi-check-square-fill"></i>
                  {% else %}
                    <i class="bi bi-square"></i>
                  {% endif %}
                <td class="cell-square cell-checkbox narrow no-inside-border">
                  {% if "C" in member.member.position %}
                    <i class="bi bi-check-square-fill"></i>
                  {% else %}
                    <i class="bi bi-square"></i>
                  {% endif %}
                </td>
                <td class="cell-square cell-checkbox narrow no-inside-border">
                  {% if "IF" in member.member.position or "1B" in member.member.position or "2B" in member.member.position or "3B" in member.member.position or "SS" in member.member.position %}
                    <i class="bi bi-check-square-fill"></i>
                  {% else %}
                    <i class="bi bi-square"></i>
                  {% endif %}
                </td>
                <td class="cell-square cell-checkbox narrow no-inside-border">
                  {% if "OF" in member.member.position or "LF" in member.member.position or "CF" in member.member.position or "RF" in member.member.position %}
                    <i class="bi bi-check-square-fill"></i>
                  {% else %}
                    <i class="bi bi-square"></i>
                  {% endif %}
                </td>

                <td class="cell-square narrow cell-smalltext cell-mono no-inside-border available-status-code-{{ member.availability_future.0.data.status_code }}">
                  {{ member.availability_future.0.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono no-inside-border available-status-code-{{ member.availability_future.1.data.status_code }}">
                  {{ member.availability_future.1.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono no-inside-border  available-status-code-{{ member.availability_future.2.data.status_code }}">
                  {{ member.availability_future.2.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono no-inside-border available-status-code-{{ member.availability_future.3.data.status_code }}">
                  {{ member.availability_future.3.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono available-status-code-{{ member.availability_past.0.data.status_code }}">
                  {{ member.availability_past.0.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono available-status-code-{{ member.availability_past.1.data.status_code }}">
                  {{ member.availability_past.1.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono available-status-code-{{ member.availability_past.2.data.status_code }}">
                  {{ member.availability_past.2.data.status.0 }}
                </td>
                <td class="cell-square narrow cell-smalltext cell-mono available-status-code-{{ member.availability_past.3.data.status_code }}">
                  {{ member.availability_past.3.data.status.0 }}
                </td>
              </tr>

            {% endfor %}
            {% for _ in blankrows_info %}
              <tr>
                <td class="cell-square"></td>
                <td class="cell-square"></td>
                <td class="cell-square"></td>
                <td class="statscell"></td>
                <td class="cell-square narrow"></td>
                <td class="cell-square narrow"></td>
                <td class="cell-square narrow"></td>
                <td class="cell-square narrow"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
                <td class="cell-square narrow available-status-code"></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          <table class="">
            <thead>
            <tr>


            </tr>
            </thead>
            <tbody>
            {% for member in members %}
              <tr>

              </tr>
            {% endfor %}
            {% for _ in blankrows_info %}
              <tr>

              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="whole-card">
    <div class="half-card">
      <div class="content card-left"></div>
    </div>
    <div class="half-card">
      <div class="content card-right">
        <div>
          <table>
            <thead>
            <tr>
              <th class="cell-square" style="background-color: #323669">
                {{ event.data.start_date|date:"D, F j, Y g:i A" }}
              </th>
            </tr>
            <tr>
              <th class="cell-square" style="background-color: #323669">
                {{ event.data.location_name }}
              </th>
            </tr>
            <tr>
              <th class="cell-square" style="background-color: lightgray">

              </th>
            </tr>
            </thead>
          </table>
          <div>
            <div class="" width="100%">
              <img src="{{ ts_team.logo.url }}"
                   height="120px"
              >
            </div>
            <div class="" width="100%" style="text-align: center;font-size: xxx-large; font-family: Pacifico">
              VS.
            </div>
            <div class="" width="100%" style="text-align: right">
              {% if ts_opponent %}
                <img src="{{ ts_opponent.logo.url }}"
                     width="120px"
                >
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
</html>
