{% load static %}
<!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>
                    <thead>
                    <tr>
                        <th class="numbercell">
                        </th>
                        <th class="customcol">
                        </th>
                        <th class="numbercell">
                        </th>
                        <th class="numbercell">
                        </th>
                        <th class="numbercell">1
                        </th>
                        <th class="numbercell">2
                        </th>
                        <th class="numbercell">3
                        </th>
                        <th class="numbercell">4
                        </th>
                        <th class="numbercell">5
                        </th>
                        <th class="numbercell">6
                        </th>
                        <th class="numbercell">7
                        </th>
                        <th class="numbercell">X
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for member in members_startinglineup %}
                        <tr>
                            <td class="numbercell">{{ member.lineup_entry.sequence | add:"1" }}</td>
                            <td class="customcol">{{ member.member.last_name }}</td>
                            <td class="numbercell">{{ member.member.jersey_number }}</td>
                            <td class="numbercell">{{ member.lineup_entry.label }}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            <table>
            <tbody>
                    {% for member in members_startingpositiononly %}
                        <tr>
                            <td class="numbercell"></td>
                            <td class="customcol">{{ member.member.last_name }}</td>
                            <td class="numbercell">{{ member.member.jersey_number }}</td>
                            <td class="numbercell">{{ member.lineup_entry.label }}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="half-card">
            <div class="content card-right">
                <table class="tg">
                    <thead>
                    <tr>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="condensedNameCell">Available</th>
                        <th class="statscell">AVG/OBP/SLG:PA</th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                        <th class="numbercell"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for member in members %}
                        <tr>
                            <td class="numbercell"></td>
                            <td class="numbercell available-status-code-{{ member.availability.status_code }}">{{ member.member.jersey_number }}</td>
                            <td class="condensedNameCell available-status-code-{{ member.availability.status_code }}">{{ member.member.last_name }}</td>
                            <td class="statscell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                            <td class="numbercell"></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </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="numbercell" style="background-color: #323669">
                                {{ event.data.start_date|date:"D, F j, Y g:i A" }}
                            </th>
                        </tr>
                        <tr>
                            <th class="numbercell" style="background-color: #323669">
                                {{ event.data.location_name }}
                            </th>
                        </tr>
                        <tr>
                            <th class="numbercell" 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">
                            <img src="{{ ts_opponent.logo.url }}"
                                 width="120px"
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>
