{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="hero-section text-center">
    <div class="container">
        <h1 class="display-4">Find the Best Odds, Instantly.</h1>
        <p class="lead">We scrape the top betting sites in Portugal to bring you the most competitive odds for your favorite events.</p>
        <a href="#" class="btn btn-secondary btn-lg mt-3">Get Started</a>
    </div>
</div>

<div class="odds-section">
    <div class="container">
        <h2 class="text-center mb-5">Upcoming Events</h2>
        <div class="row">
            {% for odd in mock_odds %}
            <div class="col-md-12">
                <div class="odds-card">
                    <h5>{{ odd.event }}</h5>
                    <p class="text-muted">{{ odd.market }} - {{ odd.outcome }}</p>
                    <table class="odds-table">
                        <tbody>
                            {% for site in odd.sites %}
                            <tr>
                                <td class="site-name">{{ site.name }}</td>
                                <td class="odd-value">{{ site.odds }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
