{% props label: String, first: Slot, second: Slot, size: i64 = 50, min: i64 = 20, max: i64 = 80, direction: String = "", grip: bool = false, nested: bool = false, id: String = "" %}
{#- Two panels: `first` starts at `size` percent (between `min` and `max`); nest another resizable in a panel for more. `nested` (for one inside a panel) drops its border and fills the panel. `id` names the layout whose sizes the controller remembers. -#}
<div class="ui-resizable" data-ui="resizable"{% if !id.is_empty() %} data-id="{{ id }}"{% end %}{% if !direction.is_empty() %} data-direction="{{ direction }}"{% end %}{% if nested %} style="border:0;border-radius:0;align-self:stretch"{% end %}>
<div class="ui-resizable-panel" style="flex-basis:{{ size }}%">{{ first }}</div>
<div class="ui-resizable-handle" role="separator" aria-orientation="{% if direction == "vertical" %}horizontal{% else %}vertical{% end %}" aria-valuenow="{{ size }}" aria-valuemin="{{ min }}" aria-valuemax="{{ max }}" aria-label="{{ label }}" tabindex="0">{% if grip %}<span class="ui-resizable-grip"></span>{% end %}</div>
<div class="ui-resizable-panel" style="flex:1">{{ second }}</div>
</div>