@page "/Query"
<PageTitle>Query</PageTitle>
<PageScript Src="./Components/Pages/Query.razor.js"/>

<main>
    <div class="scroll-nav">
        <button id="scrollTopButton" type="button" aria-label="Scroll to top">↑</button>
        <button id="scrollFavoritesButton" type="button" aria-label="Scroll to favorites">↓</button>
    </div>

    <div class="flex-row">
        <label for="lang">Query language</label>
        <select id="lang">
            <option value="jsonql" selected>jsonql-js</option>
            <option value="dactal">DACTAL</option>
        </select>
        <button id="favoriteButton" type="button">Save as favorite</button>
    </div>
    <textarea id="input" class="editor" autofocus>SELECT *
FROM personen AS p
WHERE 'EenhoofdigOuderlijkGezag' IN p.gezag[].type</textarea>
    <div id="results">
    </div>
    <Log/>

    <dialog id="favoriteNameDialog">
        <Panel Legend="Save as favorite">
            <form method="dialog" id="favoriteNameForm">
                <p>
                    <input id="favoriteNameInput" type="text" placeholder="Name"/>
                </p>
                <div class="flex-row">
                    <button type="submit">Save</button>
                    <button id="cancelFavoriteNameButton" type="reset">Cancel</button>
                </div>
            </form>
        </Panel>
    </dialog>

    <Panel Legend="Favorites">
        <div id="favoritesList" class="grid-stores">
        </div>
    </Panel>

    <Panel Legend="History">
        <div id="historyList" class="grid-stores">
        </div>
    </Panel>

    <Panel Legend="Credits">
        <div>
            jsonql-js, a pure-JS SQL-like query language for JSON
        </div>
        <div>
            <a href="https://dactal.org">DACTAL</a> by <a href="https://furia.com">glenn mcdonald</a>
        </div>
        <div>
            personen dataset from <a href="https://github.com/BRP-API/Haal-Centraal-BRP-bevragen">Haal-Centraal-BRP-bevragen
                mock-data</a>
        </div>
    </Panel>
</main>