{% for recipe in recipes %}
<div class="col">
    <div class="recipe-card">
        <h5 class="card-title">{{ recipe.title }}</h5>
        <p class="card-text">{{ recipe.ingredients.split('\n')[0] }}...</p>
        <a href="{{ url_for('recipe_detail', recipe_id=recipe.id) }}" class="btn btn-primary">View Recipe</a>
        {% if current_user.is_authenticated and current_user.is_admin %}
        <button class="btn btn-danger"
                hx-delete="{{ url_for('delete_recipe_htmx', recipe_id=recipe.id) }}"
                hx-target="closest .recipe-card"
                hx-swap="outerHTML"
                hx-confirm="Are you sure you want to delete this recipe?">
            Delete
        </button>
        {% endif %}
    </div>
</div>
{% else %}
<div class="col-12 text-center">
    <p>No recipes found.</p>
</div>
{% endfor %}