{#- chirp-ui: Split Panel
    Resizable split panel layout with draggable handle.
    Requires Alpine.js.

    Usage:
        from "chirpui/split_panel.html" import split_panel

        call split_panel()
            {% slot left %}
                <nav>Sidebar</nav>
            {% end %}
            {% slot right %}
                <main>Content</main>
            {% end %}
        end

        call split_panel(direction="vertical", default_split=30, min_split=20, max_split=80)
            {% slot left %}Top pane{% end %}
            {% slot right %}Bottom pane{% end %}
        end
-#}

{% def split_panel(direction="horizontal", default_split=50, min_split=10, max_split=90, cls="") %}
{% set dir_class = " chirpui-split-panel--vertical" if direction == "vertical" else "" %}
<div class="chirpui-split-panel{{ dir_class }}{{ " " ~ cls if cls else "" }}"
     x-data="chirpuiSplitPanel({ direction: '{{ direction }}', defaultSplit: {{ default_split }}, min: {{ min_split }}, max: {{ max_split }} })"
     x-init="init()"
     :class="{ 'chirpui-split-panel--dragging': dragging }">
    <div class="chirpui-split-panel__pane chirpui-split-panel__pane--first"
         :style="'flex: 0 0 ' + split + '%'">
        {% slot left %}
    </div>
    <div class="chirpui-split-panel__handle"
         x-ref="handle"
         tabindex="0"
         @pointerdown.prevent="startPointerDrag($event)"
         @pointermove="onPointerMove($event)"
         @pointerup="endPointerDrag($event)"
         @pointercancel="endPointerDrag($event)"
         @keydown="onKeydown($event)"
         role="separator"
         aria-orientation="{{ direction }}"
         :aria-valuenow="Math.round(split)"
         aria-valuemin="{{ min_split }}"
         aria-valuemax="{{ max_split }}">
        <span class="chirpui-split-panel__handle-grip" aria-hidden="true"></span>
    </div>
    <div class="chirpui-split-panel__pane chirpui-split-panel__pane--second">
        {% slot right %}
    </div>
</div>
{% end %}