{% extends 'base.html' %}

{% block content %}
<h1>{{ field_name }} Experts</h1>

<!-- Search Form -->
<div class="form-container">
    <form action="" method="get" class="search-form">
        <input type="text" name="search" placeholder="Search experts by name...">
        <button type="submit">Search</button>
    </form>
</div>

<div class="center-content">
    {% if profiles %}
        {% for profile in profiles %}
            <div class="expert-list-item">
                <p>
                    <a href="{% url 'profile_page' profile.id %}">
                        <img src="{{ profile.profile_picture.url }}">
                        {{ profile.first_name }} {{ profile.last_name }}
                    </a>
                </p>
            </div>
        {% endfor %}
    {% else %}
        <p>No experts found in this field.</p>
    {% endif %}
</div>
{% endblock %}