from browser import document

def init_collapsible_cards(parent_elt=None) -> None:
    """Initialize cards which can be collapsed."""
    parent = parent_elt or document
    cards = parent.select('.collapsible-card')

    for card in cards:
        header = card.select_one('.collapsible-header')
        content = card.select_one('.collapsible-content')

        content.style.maxHeight = 'none'
        natural_height = content.scrollHeight
        content.dataset.natural_height = natural_height

        header.bind('click', lambda ev: _toggle_card(ev))

def _toggle_card(event):
    """Collapse/expand the card."""
    header = event.currentTarget
    card = header.closest('.collapsible-card')
    content = card.select_one('.collapsible-content')

    if content.style.maxHeight == '0px':
        # Expand
        content.style.maxHeight = f"{content.dataset.natural_height}px"
        header.classList.remove('collapsed')
    else:
        # Collapse
        content.style.maxHeight = '0px'
        header.classList.add('collapsed')