{% load static %}
<div class="jumbotron">
<h5 class="text-center">Betting is more fun when you are winning </h5>
</div>
<!-- table for today's tips -->
             {% regroup home_page_teams by ticket as ticket_list %}

                 {% for ticket in ticket_list %}

                 {% if forloop.first %}

                 {% else %}

                     <li>{{ ticket.grouper }}
                         <ul>

 <div style="overflow-x:auto;">
<table border="2" cellpadding = "5">

<tr style='background-color: teal'>
<th style='color: white'>Country</th>
<th style='color: white'>Teams</th>
<th style='color: white'>Prediction</th>
<th style='color: white'>Odds</th>
<th style='color: white'>Status</th>
</tr>

                         {% for item in ticket.list %}

                         <tr>
                             <td style='background-color:' >{{ item.country }}</td>

                             <td >{{ item.home_team }}  <i class="far fa-futbol"></i>  {{ item.away_team}}</td>

                             <td style='background-color:' >{{ item.prediction}}</td>

                             <td>{{ item.odds}}</td>

                             {% if item.status == 'Lost' %}

                             <td style='background-color: #FF5733;'>{{ item.status}}</td>

                             {% elif item.status == 'Won' %}

                             <td style='background-color: Limegreen;' >{{ item.status}}</td>

                             {% else %}

                             <td >{{ item.status}}</td>

                             {% endif %}


                         </tr>

                         {% endfor %}
                       </table>
                     </div>
                         </ul>
                     </li>

                  {%endif%}

                 {% endfor %}

             </ul>
<!-- End of today's tips table -->