{% load ui_assets ui_classes ui_shortcuts %}
{% ui_require_asset "trellis:keybinding" %}

<c-vars keys="" class="" />
{% ui_class "ui.keybinding" "root" class=class as root_class %}
{% ui_class "ui.keybinding" "key" as key_class %}
{% ui_class "ui.keybinding" "separator" as separator_class %}
{% ui_format_shortcut_keys keys as keybinding_steps %}
<span data-ui-keybinding
      data-ui-keybinding-keys="{{ keys }}"
      aria-hidden="true"
      class="{{ root_class }}"
      {% if not keybinding_steps %}hidden{% endif %}
      {% if "x-ui-keybinding" not in attrs %}x-ui-keybinding="$el.dataset.uiKeybindingKeys"{% endif %}
      {{ attrs }}>{% for step in keybinding_steps %}{% if not forloop.first %}<span data-ui-keybinding-separator class="{{ separator_class }}">then</span>{% endif %}{% for key in step %}<kbd data-ui-keybinding-key data-key="{{ key.token }}" class="{{ key_class }}">{{ key.label }}</kbd>{% endfor %}{% endfor %}</span>