{% extends "base.html" %}
{% block content %}
<div class="hero">
    <h1>Find the Perfect Meeting Time</h1>
    <p>Create polls, share with your team, and find when everyone is available.</p>
    {% if current_user.is_authenticated %}
        <a href="/create" class="btn btn-primary">Create New Poll</a>
    {% else %}
        <a href="{{ url_for('login') }}" class="btn btn-primary">Login with SSO</a>
    {% endif %}
</div>

{% if current_user.is_authenticated %}
<div class="my-polls-section">
    <h2>Your Polls</h2>
    <div id="my-polls-grid" class="polls-grid">
        <p class="loading">Loading...</p>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if current_user.is_authenticated %}
<script>
(async () => {
    const res = await fetch('/api/my-polls');
    const polls = await res.json();
    const grid = document.getElementById('my-polls-grid');

    if (polls.length === 0) {
        grid.innerHTML = '<p class="no-polls">No polls yet. Create one or join a poll to get started!</p>';
        return;
    }

    grid.innerHTML = polls.map(p => `
        <a href="/poll/${p.id}" class="poll-card">
            <h3>${p.title}</h3>
            <span class="participant-count">${p.participant_count} participant${p.participant_count !== 1 ? 's' : ''}</span>
        </a>
    `).join('');
})();
</script>
{% endif %}
{% endblock %}