@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@* <div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div> *@

<div class="btn-group" role="group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradioDecks" value="decks" autocomplete="off" checked>
    <label class="btn btn-outline-secondary" for="btnradioDecks">Decks</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradioCards" value="cards" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradioCards">Karten</label>

</div>
<form id="searchForm" method="post">
    <div class="input-group">   
        <input type="text" id="searchInput" name="searchInput" class="form-control" placeholder="">
        <button class="btn btn-outline-secondary" type="submit" id="button_search"><i class="fa fa-search"></i></button> 
    </div>
</form>

<script>
    const searchInput = document.getElementById("searchInput");
    const searchForm = document.getElementById("searchForm");
    const radios = document.querySelectorAll("input[name='btnradio']");

    radios.forEach(radio => {
        radio.addEventListener("change", () => {
            if (radio.value === "decks") {
                searchInput.placeholder = "Nach Decks suchen...";
                searchForm.action = "/Index?handler=Decks";
            } else if (radio.value === "cards") {
                searchInput.placeholder = "Nach Karten suchen...";
                searchForm.action = "/Index?handler=Cards";
            }
        });
    });

    // Initial setzen
    document.querySelector("input[name='btnradio']:checked").dispatchEvent(new Event("change"));
</script>