{% extends "webapp/header.html" %}

{% block content %}
<p style="color: red"> Hey , Welcome תשמע אתה תותח פשששש</p>
    <style>
table
{
background-color:#ECECEE;
color:white;
}

    tr:nth-child(even) {background-color: #DAD9DC}
    th {
    background-color: #30628B;
    color: white;
}
p {
    font-size:18px ; word-spacing: 0.3em;
}

table,td, tr
{
width:60em;
}
table,td, tr
{
height:1px;
}
table {
    border-collapse:collapse;
}
table, th, td {
    border:2px solid #0f0f0f;
}

    table td, th
{
text-align:left;
vertical-align:bottom;
}
th
{
text-align:center;
}

    h1 {

    padding: auto;
        margin: auto;
        font-size: 20px;
        text-align:center;
}

    p {
color: #4F4F4F;
    padding: auto;
        margin-bottom: auto;
        font-size: 14px;
        text-align:center;
}
</style>
    <div class="fsfs">
 <table>
 <thead>
    <tr>
    <td>
    <th colspan="4" style="background-color: #4C98CB"><p style=color:#040915>  Home</p></th>
        <th colspan="4" style="background-color: #4C98CB"><p style=color:#040915>Away</th>
        <th colspan="4" style="background-color: #4C98CB"><p style=color:#040915>Total (home + away)</th>
        </td>
  </tr>
    <tr><th>קבוצה</th>
    <th>שיחקו</th>
    <th>הבקיעו</th>
        <th>ספגו</th>
    <th>שערים</th>
    <th>שיחקו</th>
        <th>הבקיעו</th>
     <th>ספגו</th>
    <th>שערים</th>
        <th>שיחקו</th>
    <th>הבקיעו</th>
        <th>ספגו</th>
    <th><p>ff</p></th>

    </tr>
{% for record in records %}
    {% if forloop.first %}

      <tr>
      {% for field in record %}
        <th> {{ field }} </th>
      {% endfor %}
      </tr>
    </thead>
    <tbody>
    {% else %}
      <tr>
      {% for field in record %}
        <td><p> {{ field }} </p></td>
      {% endfor %}
    {% endif %}
    {% if forloop.last %}
    </tbody>
    {% endif %}
{% endfor %}
</table>
</div>
{% endblock %}