{% extends 'base.html.twig' %}

{% block title %}Accueil{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="justify-content-center align-items-center">
        <form class="d-flex align-items-center row" hx-post="/search" hx-target="#recettes" hx-indicator=".htmx-indicator">
            <div class="col-md-8 mx-auto">
                <div class="input-group">
                    <span class="input-group-text">
                        {{ svg_icon('search.svg') }}
                    </span>
                    <input
                        type="search"
                        class="form-control"
                        name="search"
                        placeholder="Rechercher par recette, ingredients..."
                    >
                    <button type="submit" class="btn btn-primary">Rechercher</button>
                </div>
            </div>
            <div class="col-md-8 mx-auto">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" name="all" value="1" id="allUsersCheck">
                    <label class="form-check-label" for="allUsersCheck">Chercher parmi tous les utilisateurs</label>
                </div>
            </div>
        </form>
    <div id="recettes" class="mt-4"></div>
</div>

{% endblock %}