@{
    ViewData["Title"] = "Home Page";
}
<head>
    <title>@ViewData["Title"] - Hello Fresh</title>
    <link rel="stylesheet" href="~/css/HelloFresh/index.css" asp-append-version="true" />

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />

    <!-- Custom fonts for this template-->
    <link href="~/lib/fontawesome-free/css/all.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
     
</head>

<!-- juste sous la topbar, au début de .content -->
<div class="sticky-search">
    <form class="form-inline w-100 navbar-search">


      
        <!-- ANCRE + CARD flottante -->
        <div id="filterAnchor" class="filter-anchor">
            <button id="filterOpenBtn" class="hf-icon-btn" type="button" title="Filtres">
                <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18v2l-7 7v4l-4 2v-6L3 7V5z" /></svg>
                <span id="activeFilterBadge" class="hf-badge" style="display:none;"></span>
            </button>

            <!-- CARD flottante -->
            <div id="filtersCard" class="hf-filter-card is-floating" hidden>
                <div class="hf-filter-header">
                    <div class="title">
                        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18v2l-7 7v4l-4 2v-6L3 7V5z" /></svg>
                        <span>Filtres</span>
                    </div>
                    <span id="activeFilterBadgeClone" class="hf-badge" style="display:none;"></span>
                </div>

                <div class="hf-filter-body">
                    <!-- Ingrédients -->
                    <section class="hf-field">
                        <label class="hf-section-title">Ingrédients</label>
                        <div id="chipIngredients" class="hf-chip-cloud"></div>
                        <select id="filterIngredients" multiple style="width:100%"></select>
                    </section>

                    <!-- Tags -->
                    <section class="hf-field">
                        <label class="hf-section-title">Tags</label>
                        <div id="chipTags" class="hf-chip-cloud"></div>
                        <select id="filterTags" multiple style="width:100%"></select>
                    </section>

                    <!-- Temps -->
                    <section class="hf-field">
                        <label class="hf-section-title">Temps (minutes)</label>
                        <div class="hf-time-row">
                            <input id="filterTimeMin" type="number" min="0" inputmode="numeric" placeholder="Min" class="hf-input">
                            <span class="hf-sep">–</span>
                            <input id="filterTimeMax" type="number" min="0" inputmode="numeric" placeholder="Max" class="hf-input">
                        </div>
                        <div class="hf-chips">
                            <button class="hf-chip" type="button" data-tmax="15">≤ 15</button>
                            <button class="hf-chip" type="button" data-tmax="30">≤ 30</button>
                            <button class="hf-chip" type="button" data-tmax="45">≤ 45</button>
                            <button class="hf-chip" type="button" data-tmax="60">≤ 60</button>
                        </div>
                    </section>
                </div>

                <div class="hf-filter-footer">
                    <button id="clearFilters" class="hf-btn ghost" type="button">Tout effacer</button>
                    <button id="applyFilters" class="hf-btn primary" type="button">Appliquer</button>
                </div>
            </div>
        </div>

        <div class="input-group" id="divSearch">
            <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                   aria-label="Search" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button">
                    <i class="fas fa-search fa-sm"></i>
                </button>
            </div>
        </div>

        <button id="archiveAllBtn" class="btn btn-secondary">
            <i class="bi bi-tag"></i>
        </button>

    </form>
</div>


<div class="section-toggle" id="ownedSection">
    <hr class="section-hr" />
    <button class="section-chip" type="button">
        <span class="collapse-text">Afficher recettes choisies</span>
        <span id="ownedCount" class="owned-count">(0/14)</span>
        <span class="collapse-icon">▼</span>
    </button>
</div>

<div id="recipeOwnedWrap" class="collapse-wrap" aria-hidden="true">
    <div id="recipeGridOwned" class="grid"></div>
</div>


<!-- Grille principale -->
<div id="recipeGrid" class="grid"></div>



<div id="paginationControls" class="pagination-modern">
    <button id="prevPage" class="pagination-btn" title="Page précédente">⬅</button>
    <span id="pageInfo">1/1</span>
    <button id="nextPage" class="pagination-btn" title="Page suivante">➡</button>
</div>

<!-- Modal PDF -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body p-0" style="height:80vh;">
                <iframe id="pdfFrame" src="" width="100%" height="100%" style="border:0;"></iframe>
            </div>
        </div>
    </div>
</div>



<script src="~/js/HelloFresh/index.js" asp-append-version="true"></script>
<script src="~/js/HelloFresh/tagsColor.js" asp-append-version="true"></script>
