<article>
    <header>
        <h2>Flock Registry Viewer</h2>
        <p>Browse items registered with the Flock framework.</p>
    </header>

    <nav>
        <ul role="group">
            <li>
                <button role="button" class="outline"
                    hx-get="{{ url_for('htmx_get_registry_table', item_type='type') }}"
                    hx-target="#registry-table-container" hx-indicator="#registry-loading"
                    hx-on:click="setActiveButton(this)">
                    View Types
                </button>
            </li>
            <li>
                <button role="button" class="outline"
                    hx-get="{{ url_for('htmx_get_registry_table', item_type='tool') }}"
                    hx-target="#registry-table-container" hx-indicator="#registry-loading"
                    hx-on:click="setActiveButton(this)">
                    View Tools/Callables
                </button>
            </li>
            <li>
                <button role="button" class="outline"
                    hx-get="{{ url_for('htmx_get_registry_table', item_type='component') }}"
                    hx-target="#registry-table-container" hx-indicator="#registry-loading"
                    hx-on:click="setActiveButton(this)">
                    View Components
                </button>
            </li>
            <li>
                <span style="padding: 0.25rem; text-decoration: underline;">Feedback-Files</span>
                <div>
                    <a href="{{ url_for('chat_feedback_download_all', format='csv') }}" id="downloadFeedbackLinkAll"
                        style="padding: 0.25rem 0.5rem; margin: 0.25rem; background: var(--pico-primary); color: white; text-decoration: none; border-radius: 4px; font-size: 0.875rem;">
                        CSV
                    </a>
                    <a href="{{ url_for('chat_feedback_download_all', format='xlsx') }}"
                        id="downloadFeedbackLinkAllXlsx"
                        style="padding: 0.25rem 0.5rem; margin: 0.25rem; background: var(--pico-primary); color: white; text-decoration: none; border-radius: 4px; font-size: 0.875rem;">
                        XLSX
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <div id="registry-loading" class="htmx-indicator" style="text-align: center; margin-top: 1rem;">
        <progress></progress> Loading...
    </div>

    <div id="registry-table-container" style="margin-top: 1.5rem;">
        <p>Select a category above to view registered items.</p>
    </div>
</article>

<script>
    // Make sure this script is included or available globally
    function setActiveButton(clickedButton) {
        const buttons = clickedButton.closest('ul[role="group"]').querySelectorAll('button');
        buttons.forEach(button => {
            button.classList.remove('primary');
            button.classList.add('outline');
        });
        clickedButton.classList.remove('outline');
        clickedButton.classList.add('primary');
    }
</script>