{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container mt-5">
    <h1 class="text-light">My Dashboard</h1>
    <hr class="bg-secondary">

    <div class="card bg-dark-2 text-light mt-4">
        <div class="card-header">
            My Watchlist
        </div>
        <div class="card-body">
            {% if watchlist %}
                <ul class="list-group list-group-flush">
                    {% for stock in watchlist %}
                        <li class="list-group-item bg-dark-2 text-light">{{ stock.name }} ({{ stock.ticker }})</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="card-text">Your watchlist is empty. Add stocks to get started.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
