{% load ui_classes ui_props %}

<c-vars orientation="horizontal" variant="default" text :decorative="True" class="" />
{% if orientation == "vertical" %}
    {% ui_class "ui.separator" "separator" orientation="vertical" variant=variant class=class as separator_class %}
    <div data-ui-separator
         data-orientation="vertical"
         data-variant="{{ variant }}"
         {% if decorative is True %}role="none"{% else %}role="separator" aria-orientation="vertical"{% endif %}
         class="{{ separator_class }}"
         {{ attrs }}>
    </div>
{% elif text %}
    {% ui_class "ui.separator" "separator" orientation="horizontal" withText=True class=class as separator_class %}
    {% ui_class "ui.separator" "rule" variant=variant as rule_class %}
    {% ui_class "ui.separator" "label" as label_class %}
    <div data-ui-separator
         data-orientation="horizontal"
         data-variant="{{ variant }}"
         {% if decorative is True %}role="none"{% else %}role="separator" aria-orientation="horizontal"{% endif %}
         class="{{ separator_class }}"
         {{ attrs }}>
        <div data-ui-separator-rule role="none" class="{{ rule_class }}"></div>
        <c-ui.text as="span"
                   size="xs"
                   color="muted"
                   class="{{ label_class }}"
                   data-ui-separator-label>
            {{ text }}
        </c-ui.text>
        <div data-ui-separator-rule role="none" class="{{ rule_class }}"></div>
    </div>
{% else %}
    {% ui_class "ui.separator" "separator" orientation=orientation variant=variant class=class as separator_class %}
    <div data-ui-separator
         data-orientation="{{ orientation }}"
         data-variant="{{ variant }}"
         {% if decorative is True %}role="none"{% else %}role="separator" aria-orientation="{{ orientation }}"{% endif %}
         class="{{ separator_class }}"
         {{ attrs }}>
    </div>
{% endif %}