Master-Detail

<div data-component="master-detail">
    <div class="master-detail">
        <div class="master-list" data-list="items">
            <template>
                <div class="master-item" data-action="selectItem" data-bind="name"></div>
            </template>
        </div>
        <div class="detail-panel">
            <div data-show="selectedItem">
                <h3 data-bind="selectedItem.name"></h3>
                <p data-bind="selectedItem.description"></p>
                <p><strong>Category:</strong> <span data-bind="selectedItem.category"></span></p>
                <p><strong>Added:</strong> <span data-bind="selectedItem.date"></span></p>
            </div>
            <div data-show="!selectedItem">Select an item from the list.</div>
        </div>
    </div>
</div>

<script>
wildflower.component('master-detail', {
    state: {
        selectedItem: null,
        items: [
            { name: 'API Gateway', description: 'Routes and load-balances incoming requests.', category: 'Infrastructure', date: '2026-01-15' },
            { name: 'Auth Service', description: 'Handles authentication and session validation.', category: 'Security', date: '2026-02-03' },
            { name: 'Data Pipeline', description: 'Ingests and routes incoming data streams.', category: 'Backend', date: '2026-03-10' },
            { name: 'Monitoring', description: 'Collects metrics and manages alerts.', category: 'DevOps', date: '2026-03-12' }
        ]
    },
    selectItem(e, el, { index }) {
        this.selectedItem = this.items[index];
    }
});
</script>