{% extends 'base.html' %}

{% block content %}
<h1 class="mb-4 text-center">Welcome to Pollify</h1>

<div class="d-flex justify-content-center mb-4">
    <form method="GET" class="w-50">
        <input type="text" name="search" class="form-control" placeholder="Search polls..." value="{{ request.args.get('search', '') }}">
    </form>
</div>

<div class="list-group text-center">
    {% for poll_id, poll in polls.items() %}
        <a href="{{ url_for('poll', poll_id=poll_id) }}" class="list-group-item list-group-item-action">
            <img src="{{ poll['image_url'] }}" alt="{{ poll['title'] }}" class="img-fluid mb-2" style="max-height: 200px;">
            <h5>{{ poll['title'] }}</h5>
        </a>
    {% else %}
        <p>No polls available.</p>
    {% endfor %}
</div>
{% endblock %}