{# DO NOT EDIT: This file is automatically generated by the project's build task #}
{% macro breadcrumb(
        class,
        breadcrumbs=[
          {
            href: "#",
            text: "Breadcrumb Link"
          },
          {
            href: "#",
            text: "Breadcrumb Link 2"
          },
          {
            text: "Current Page"
          }
        ]
  ) %}
  <ul class="luci-breadcrumb{{ " " + class if class }}">
    {% for breadcrumb in breadcrumbs %}
      <li class="luci-breadcrumb__item">
        {% if breadcrumb.href %}
          <a href="{{ breadcrumb.href }}" class="luci-breadcrumb__link{{ " " + breadcrumb.class if breadcrumb.class }}" tabindex="0">
            <span class="luci-breadcrumb__text">{{ breadcrumb.text }}</span>
          </a>
          {% else %}
            <span class="luci-breadcrumb__text">{{ breadcrumb.text }}</span>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endmacro %}

{% macro button(
            class=false,
            id=false,
            for=false,
            input_id=false,
            name=false,
            checked=false,
            disabled=false,
            el="button",
            text,
            href=false,
            icon_left=false,
            icon_right=false,
            icon_path=false,
            custom_attr_array=[]) %}

    {# Default text if button() is called with no other arguments #}
    {% if icon_left == false and icon_right == false and text == undefined %}
        {% set text = "Get It Now" %}
    {% endif %}

    {# Defaults for <a> buttons #}
    {% if href %} {# if an href is passed in, automatically change the el to 'a' #}
        {% set el ="a" %}
    {% endif %}

    {# Defaults for checkbox & radio buttons #}
    {% set input_type = false %}
    {% if el == "checkbox" or el == "radio" %}
        {% set input_type = el %}
        {% set el = "label" %}
        {# need a class hook to strip off button styles for input buttons and apply them to the button inner #}
        {% set class = class + " luci-button--input" %} 
        
        {% if input_id == false %}
            {% set input_id = "luci-button--" + range(0, 100000) | random %}
        {% endif %}
        {% set for = input_id %}
    {% endif %}

    {# Modifier classes for icon buttons #}
    {% if icon_left or icon_right %}
        {% set class = class + " luci-button--with-icons" %}
    {% endif %}

    {# Add --disabled modifier class for <a> buttons that don't have a disabled attribute #}
    {% if disabled %}
        {% set class = class + " luci-button--disabled" %}
    {% endif %}

    {# Render actual button markup here #}
    <{{ el }} 
        class="luci-button{{ " " + class if class }}" 
        {% if href %}   href="{{ href }}"   {% endif %}
        {% if id %}     id="{{ id }}"       {% endif %}
        {% if for %}    for="{{ for }}"     {% endif %}
        {{ 'disabled' if el == "button" and disabled }}
        {% if el == "label" %} 
            role="button" 
            {% if checked %}
                aria-pressed="true"
            {% else %}
                aria-pressed="false"
            {% endif %}
        {% endif %}
        {% if custom_attr_array %}
          {% for attr in custom_attr_array %}
              {{ attr.name }} = "{{ attr.value }}" 
          {% endfor %}
        {% endif %}
    >
        {% if input_type %}
            <input 
                id="{{ input_id }}" 
                type="{{ input_type }}" 
                class="luci-button__input"
                {% if name %} name="{{ name }}" {% endif %}
                {{ 'checked' if checked }}
                {{ 'disabled' if disabled }}
            >
        {% endif %}
        {% if icon_left or icon_right or input_type %} 
            {# use display: flex; to vertically align icons with text, <button> elements cannot be a flex parent, so we need an inner wrapper to set the display: flex; context #}
            <span class="luci-button__inner"> 
            {% if icon_left %}
                {{ icon(class="luci-button__icon luci-button__icon--left", name=icon_left, path=icon_path) }}
            {% endif %}
        {% endif %}
            
        {% if text and (icon_left or icon_right or input_type) %}
            <span class="luci-button__text">
        {% endif %}
        
        {{ text }}
        
        {% if text and (icon_left or icon_right or input_type) %}
            </span>
        {% endif %}

        {% if icon_left or icon_right or input_type %}
            {% if icon_right %}
                {{ icon(class="luci-button__icon luci-button__icon--right", name=icon_right, path=icon_path) }}
            {% endif %}
            </span>
        {% endif %}
    </{{ el }}>
{% endmacro %}

{% macro button_group(class=false) %}
    <div class="luci-button-group{{ ' ' + class if class }}">
        {{ caller() }}
    </div>
{% endmacro %}

{% macro dialog(
  class=false,
  id,
  title,
  text,
  cancel_text='Cancel',
  primary_action_text='Delete',
  primary_action_dismiss=false,
  open=false,
  aria_hidden=true
  ) %}
  <dialog class="luci-dialog{{ ' ' + class if class }}" {% if open %}open{% endif %} {% if id %}id="{{ id }}"{% endif %} aria-modal="true" aria-hidden="{{ aria_hidden }}" role="dialog">
    <div class="luci-dialog__content">
      <div class="luci-dialog__header">
        <h4 class="luci-dialog__title">{{ title }}</h4>
        {{ button(
            class="luci-button--icon-only luci-button--flat", icon_left='close',
            custom_attr_array=[
              {
                name: 'data-luci-dismiss',
                value: 'modal'
              }
            ]
          ) }}
      </div>
      <div class="luci-dialog__body">
        <p class="luci-dialog__text">{{ text | safe }}</p>
        {% if caller %}
          {{ caller() }}
        {% endif %}
      </div>
      <div class="luci-dialog__footer">
        {% if cancel_text != false %}
          {{ link(
            text=cancel_text,
            custom_attr_array=[
                {
                  name: 'data-luci-dismiss',
                  value: 'modal'
                }
              ]
            ) }}
        {% endif %}

        {% if primary_action_dismiss %}
          {{ button(
              class="luci-button--primary",
              text=primary_action_text,
              custom_attr_array=[
                {
                  name: 'data-luci-dismiss',
                  value: 'modal'
                }
              ]) }}
            {% else %}
            {{ button(class="luci-button--primary", text=primary_action_text) }}
        {% endif %}
      </div>
    </div>
  </dialog>
{% endmacro %}

{% macro badge(
    class=false,
    number=0,
    max_number=999
) %}
    {% set number = number | float %}
    {% set number = 0 if number === null else number %}
    {% set number = max_number + "+" if number > max_number else number %}
    <span class="luci-badge{{ ' ' + class if class }}">
        {{ number }}
    </span>
{% endmacro %}

{% macro grid(class=false) %}
{% endmacro %}
{% macro form(class, action="#", method="post") %}
  <form class="luci-form{{ " " + class if class  }}" action="{{ action }}" method="{{ method }}">
    {% if caller %}
      {{ caller() }}
    {% endif %}
  </form>
{% endmacro %}

{% macro form_fieldset(class, name) %}
  <fieldset class="luci-form__fieldset{{ " " + class if class }}">
    <legend class="luci-form__label">{{ name }}</legend>
    {% if caller %}
      {{ caller() }}
    {% endif %}
  </fieldset>
{% endmacro %}

{% macro form_field_group(class) %}
  <div class="luci-form__field-group{{ " " + class if class }}">
    {% if caller %}
      {{ caller() }}
    {% endif %}
  </div>
{% endmacro %}

{% macro form_label(for, name, class) %}
  <label {% if for %} for="{{ for }}" {% endif %} class="luci-form__label{{ " " + class if class }}">{{ name }}</label>
{% endmacro %}

{% macro form_input(
    input_type="text",
    name,
    input_id=false,
    value,
    placeholder,
    required,
    disabled,
    readonly,
    autofocus,
    autocomplete,
    class,
    describedby) %}

    {% if input_id == false %}
      {% set input_id = "luci-input-" + range(0, 100000) | random %}
    {% endif %}
  <input
    type="{{ input_type }}"
    {% if name %} name="{{ name }}" {% endif %}
    id="{{ input_id }}"
    class="luci-form__input{{ " " + class if class }}"
    {% if value %} value="{{ value }}" {% endif %}
    {% if placeholder %} placeholder="{{ placeholder }}" {% endif %}
    {{ 'required' if required }}
    {{ 'disabled' if disabled }}
    {{ 'readonly' if readonly }}
    {{ 'autofocus' if autofocus }}
    {% if autocomplete %} autocomplete="{{ autocomplete }}" {% endif %}
    {% if describedby %} aria-describedby="{{ describedby }}"{% endif %}
  >
{% endmacro %}

{% macro form_radio(
    input_id=false,
    name="options",
    value="on",
    checked=true,
    label="Selected",
    class,
    describedby,
    disabled=false) %}

    {% if input_id == false %}
      {% set input_id = "luci-input-" + range(0, 100000) | random %}
    {% endif %}

  <span class="luci-form__radio">
    <label for="{{ input_id }}" class="luci-radio__label">
      <input
        type="radio"
        name="{{ name }}"
        id="{{ input_id }}"
        {% if class %} class="{{ class }}" {% endif %}
        {% if value %} value="{{ value }}" {% endif %}
        {{ 'checked' if checked }}
        {{ 'disabled' if disabled }}
        {% if describedby %} aria-describedby="{{ describedby }}" {% endif %}
      >
      <span class="luci-radio__button"></span>
      <span class="luci-radio__label-text">{{ label }}</span>
    </label>
  </span>
{% endmacro %}

{% macro form_checkbox(
    input_id=false,
    name="options",
    checked=true,
    label="Selected",
    class,
    describedby,
    value="on",
    disabled=false) %}

    {% if input_id == false %}
      {% set input_id = "luci-input-" + range(0, 100000) | random %}
    {% endif %}

  <span class="luci-form__checkbox">
    <label for="{{ input_id }}" class="luci-checkbox__label">
      <input
        type="checkbox"
        name="{{ name }}"
        id="{{ input_id }}"
        {% if class %} class="{{ class }}" {% endif %}
        value="{{ value }}"
        {{ 'checked' if checked }}
        {{ 'disabled' if disabled }}
        {% if describedby %} aria-describedby="{{ describedby }}" {% endif %}
      >
      <span class="luci-checkbox__button"></span>
      {% if label %}
        <span class="luci-checkbox__label-text">{{ label }}</span>
      {% endif %}
    </label>
  </span>
{% endmacro %}

{% macro form_select(
    class,
    name="states",
    id="select-01",
    describedby,
    options=[
      {
        value: '',
        label: 'Select a state',
        selected: true
      },
      {
        value: 'alabama',
        label: 'Alabama'
      },
      {
        value: 'alaska',
        label: 'Alaska'
      },
      {
        value: 'arizona',
        label: 'Arizona'
      }
    ],
    disabled=false) %}
  <span class="luci-form__select-wrapper{{" " + class if class }}">
    <select class="luci-form__select luci-form__input{{ " " + class if class }}" name="{{ name }}" id="{{ id }}" {{ 'disabled' if disabled }} {% if describedby %} aria-describedby="{{ describedby }}" {% endif %}>
      {% for option in options %}
        {% if option.selected %}
          <option class="luci-form__select-option" {% if value %} value="{{option.value}}"{% endif %} selected>{{ option.label }}</option>
          {% else %}
            <option class="luci-form__select-option" {% if value %} value="{{ option.value }}" {% endif %}>{{ option.label }}</option>
        {% endif %}
      {% endfor %}
    </select>
  </span>
{% endmacro %}

{% macro form_textarea(
    name="comments",
    id="comments",
    text,
    rows="4",
    cols="80",
    required,
    disabled,
    readonly,
    autofocus,
    describedby,
    class) %}
  <textarea name="{{ name }}" rows="{{ rows }}" cols="{{ cols }}" id="{{ id }}" class="luci-form__textarea luci-form__input{{ " " + class if class }}"
  {{ 'required' if required }}
  {{ 'disabled' if disabled }}
  {{ 'readonly' if readonly }}
  {{ 'autofocus' if autofocus }}
  {% if describedby %} aria-describedby="{{ describedby }}" {% endif %}>{{text}}</textarea>
{% endmacro %}

{% macro form_field_error(id, error_message) %}
  <span class="luci-form__field-error" {% if id %}id="{{ id }}"{% endif %} role="alert">{{ error_message }}</span>
{% endmacro %}

{% macro form_field_help(help_message="Enter date in mm/dd/yyyy", class) %}
  <span class="luci-form__field-help{{ " " + class if class }}">{{ help_message }}</span>
{% endmacro %}

{% macro form_combo_box(
    input_type="text",
    name,
    input_id=false,
    value,
    placeholder,
    required,
    disabled,
    readonly,
    autofocus,
    autocomplete,
    class,
    describedby,
    combo_box_list=[
          {
              text:"<mark>List</mark> item 1 Link",
              href:"#"
          },
          {
              text:"<mark>List ite</mark>m 2 Link",
              href:"#"
          },
          {
              text:"<mark>Lis</mark>t item 3 Link",
              href:"#"
          },
          {
              text:"List <mark>item 4</mark> Link",
              href:"#"
          },
          {
              text:"<mark>Li</mark>st item 5 Link",
              href:"#"
          },
          {
              text:"List <mark>item 6</mark> Link",
              href:"#"
          },
          {
              text:"List <mark>item 7</mark> Link",
              href:"#"
          },
          {
              text:"<mark>List ite</mark>m 8 Link",
              href:"#"
          },
          {
              text:"List item <mark>9 Link</mark>",
              href:"#"
          },
          {
              text:"List item <mark>10 Lin</mark>k",
              href:"#"
          },
          {
              text:"List item <mark>11 Lin</mark>k",
              href:"#"
          },
          {
              text:"List <mark>item 1</mark>2 Link",
              href:"#"
          },
          {
              text:"List it<mark>em 13 </mark>Link",
              href:"#"
          },
          {
              text:"List it<mark>em 14 </mark>Link",
              href:"#"
          },
          {
              text:"List item 1<mark>5 Link</mark>",
              href:"#"
          }
      ]) %}

    <div class="luci-form__combo-box{{ " " + class if class }}">
      <div class="luci-form__combo-box-wrapper">
        {{ form_input(
          input_type=input_type,
          name=name,
          input_id=input_id,
          value=value,
          placeholder=placeholder,
          required=required,
          disabled=disabled,
          readonly=readonly,
          autofocus=autofocus,
          describedby=describedby,
          class="luci-form__combo-box-input"
          ) }}
          {{ button(
              class="luci-button--icon-only luci-button--small luci-button--flat luci-form__combo-box-close",
              icon_left="close"
            ) }}
          {{ icon(name="expand", class="luci-form__combo-box-icon") }}
        </div>
        <div class="luci-form__combo-box-menu">
          {{ list_group(
            class="luci-form__combo-box-list",
            list=combo_box_list
          ) }}
        </div>
    </div>
{% endmacro %}

{% macro icon(
    name='messages',
    title=false,
    path=false,
    class=false) %}

    {# Explicitly default path to false in case null or undefined is passed in #}
    {% set path = path | default(false) %}

    {# A passed in 'path' variable will always be used #}
    {% if path == false %}
        {% if global_icon_svg_path != false and global_icon_svg_path != null %}
            {# If no value for path is passed in a global variable called 'global_icon_svg_path' is referenced #}
            {% set path = global_icon_svg_path %}
        {% else %}
            {# If no value for path is passed and no global variable is set, then this path is used by default #}
            {% set path = '/icons/luci.svg' %}
        {% endif %}
    {% endif %}
    <svg class="luci-icon{{ ' ' + class if class }}" 
            {% if title %} 
                aria-labelledby="title"
            {% else %}
                aria-hidden="true" 
            {% endif %}>
        <use xlink:href="{{ path }}#{{name}}">
            {% if title %}
                <title>{{title}}</title>
            {% endif %}
        </use>
    </svg>
{% endmacro %}

{% macro link(class=false,
                href="#",
                text="Click Me",
                icon_class=false,
                icon_left=false,
                icon_right=false,
                icon_path=false,
                target=false,
                custom_attr_array=[],
                element="a") %}
    <{{element}}
      class="luci-link{{ ' ' + class if class }}"
    {% if element === "a" %}
      href="{{ href }}"
      {{ 'target=' + target if target }}
    {% endif %}
    {% if custom_attr_array %}
        {% for attr in custom_attr_array %}
            {{ attr.name }} = "{{ attr.value }}"
        {% endfor %}
    {% endif %}
    >
        {% if icon_left %}
            {{ icon(class="luci-link__icon luci-link__icon--left", name=icon_left, path=icon_path) }}
        {% endif %}
        {% if icon_left or icon_right %}
          <span class="luci-link__text">
              {{ text }}
          </span>
        {% else %}
          {{ text }}
        {% endif %}
        {% if icon_right %}
            {{ icon(class="luci-link__icon luci-link__icon--right", name=icon_right, path=icon_path) }}
        {% endif %}
    </{{element}}>
{% endmacro %}

{% macro menu(
    class=false,
    container_class="luci-container--light",
    trigger={
      type: "button",
      props: {
        text: "Button Trigger",
        class: "luci-button--secondary",
        icon_right: "expand"
      }
    },
    body_padding=true,
    action_button_text=false,
    icon_name="more"
) %}
    <div class="luci-menu{{ ' ' + class if class }}">
        {{ menu_trigger_element(trigger=trigger) }}
        <div class="luci-menu__content {{ container_class }}" role="menu" aria-hidden="true">
            <div class="luci-menu__body{{' luci-menu__body--no-padding' if not body_padding}}">
              {% if caller %}
                {{ caller() }}
              {% endif %}
            </div>
            {% if action_button_text %}
            <div class="luci-menu__action">
                {{ button(class="luci-button--primary luci-button--small", text=action_button_text if action_button_text else "Submit") }}
            </div>
            {% else %}
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro menu_trigger_element(
    trigger={
      type: "button",
      props: {
        text: "Button Trigger",
        class: "luci-button--secondary",
        icon_right: "expand"
      }
    }
) %}
  {% set trigger_element %}
    {{ getContext(trigger.type)(
        text=trigger.props.text,
        class=trigger.props.class + ' luci-menu__trigger',
        icon_left= trigger.props.icon_left,
        icon_right= trigger.props.icon_right,
        custom_attr_array=[
          {
            name: 'aria-expanded',
            value: 'false'
          },
          {
            name: 'aria-haspopup',
            value: 'true'
          }
        ]
      ) }}
  {% endset %}

  {% if trigger.button_group.props %}
    <div class="luci-button-group">
      {{ button(text=trigger.button_group.props.text, class=trigger.button_group.props.class) }}
      {{ trigger_element | safe }}
    </div>
  {% else %}
    {{ trigger_element | safe }}
  {% endif %}
{% endmacro %}

{% macro pagination(
        class,
        pages=[
          {
            href: "#",
            text:"1",
            current: true
          },
          {
            href: "#",
            text:"2"
          }
        ]
  ) %}
  
  {% set disable_previous=false %}
  {% set disable_next=false %}

  {% for page in pages %}
    {% if loop.first and page.current %}
      {% set disable_previous=true %}
    {% endif %}
    {% if loop.last and page.current %}
      {% set disable_next=true %}
    {% endif %}
  {% endfor %}

  <ul class="luci-pagination{{ " " + class if class }}">
    <li class="luci-pagination__item">
      <{{ "div" if disable_previous else 'a href="#"' }} class="luci-pagination__link luci-pagination__link--previous{{ " luci-pagination__link--disabled" if disable_previous }}">
        {{ icon(name="navigate-back") }} Previous <span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
      </{{ "div" if disable_previous else "a" }}>
    </li>
    {% for page in pages %}
      <li class="luci-pagination__item">
        {% if page.range %}
          <a href="{{ page.href }}" class="luci-pagination__link luci-pagination__link--range">
            <span class="luci-pagination__label-hidden" aria-hidden="true">{{ page.label }}</span>
            &hellip;
          </a>
        {% else %}
          {% if page.current %}
            <div class="luci-pagination__link luci-pagination__link--current">
              <span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
              <span class="luci-pagination__label-hidden" aria-hidden="true">page</span>
              {{ page.text }}
            </div>
          {% else %}
            <a href="{{ page.href }}" class="luci-pagination__link {{ page.class if page.class }}">
              <span class="luci-pagination__label-hidden" aria-hidden="true">page</span>
              {{ page.text }}
            </a>
          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
    <li class="luci-pagination__item">
      <{{ "div" if disable_next else 'a href="#"' }} class="luci-pagination__link luci-pagination__link--next{{ " luci-pagination__link--disabled" if disable_next }}">
        Next {{ icon(name="navigate-forward") }} <span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
      </{{ "div" if disable_next else "a" }}>
    </li>
  </ul>
{% endmacro %}

{% macro list_group(
    class=false,
    contextual=false,
    list=[
        {
            text:"List Heading",
            heading:true
        },
        {
            text:"List item 1 Link",
            href:"#"
        },
        {
            text:"List item 2 Link",
            href:"#",
            list: [
                {
                    text:"Nested List item 1",
                    href:"#"
                },
                {
                    text:"Nested List item 2"
                }
            ]
        },
        {
            text:"List item 3 Non-link"
        }
    ]
) %}
    {% for item in list %}
        {% set contextual=true if item.contextual_icons %}
    {% endfor %}
    <ul class="luci-list-group{{ ' luci-list-group--contextual' if contextual }}{{ ' ' + class if class }}">
        {% for item in list %}
        <li class="luci-list-group__item{{ ' luci-list-group__item--heading' if item.heading }}">
            {% if item.heading %}
                {{ item.text | safe }}
            {% else %}

                {% if item.contextual_icons %}
                    {{ build_list_group_contextual_element(
                        element=element,
                        item=item,
                        has_cells=has_cells
                    ) }}
                {% elif item.checkboxes %}
                    <form class="luci-form" action="#" method="post">
                        <div class="luci-form__field-group">
                            {% for checkbox in item.checkboxes %}
                                {{ form_checkbox(input_id="checkbox" + range(0, 100000) | random, checked=checkbox.checked, label=checkbox.text) }}
                            {% endfor %}
                        </div>
                    </form>
                {% else %}
                    {{ build_list_group_element(
                        element=element,
                        item=item,
                        has_cells=has_cells
                    ) }}
                {% endif %}

            {% endif %}
        </li>
        {% endfor %}
    </ul>
{% endmacro %}

{% macro build_list_group_element(item=false) %}
    {% set element = 'a' if item.href and not item.disabled else 'span' %}
    {% set has_cells = true if item.icon_name or item.badge_number %}
    <{{ element }} 
    {% if element === 'a' %}
    href="{{ item.href }}"
    {% endif %}
    class="luci-list-group__element{{ ' luci-list-group__element--link' if item.href and not item.disabled }}{{ ' luci-list-group__element--' + item.modifier if item.href and not item.disabled and item.modifier }}{{ ' luci-list-group__element--disabled' if item.disabled }}{{ ' luci-list-group__element--flex' if has_cells }}"
    >
    {% if item.icon_name %}
        <span class="luci-list-group__cell">
            {{ icon(name=item.icon_name) }}
        </span>
    {% endif %}
    {% if has_cells %}
        <span class="luci-list-group__cell luci-list-group__cell--text">
    {% endif %}
      {{ item.text | safe }}
    {% if has_cells %}
        </span>
    {% endif %}
    {% if item.badge_number %}
        <span class="luci-list-group__cell">
            {{ badge(class=item.badge_class if item.badge_class, number=item.badge_number) }}
        </span>
    {% endif %}
    </{{ element }}>
    {% if item.list %}
      {{ list_group(list=item.list) }}
    {% endif %}
{% endmacro %}

{% macro build_list_group_contextual_element(item=false) %}
    <span class="luci-list-group__contextual-row">
        <span class="luci-list-group__contextual-cell luci-list-group__contextual-cell--text">
            {% set element = 'a' if item.href and not item.disabled else 'span' %}
            <{{ element }} 
            {% if element === 'a' %}
            href="{{ item.href }}"
            {% endif %}
            class="luci-list-group__element{{ ' luci-list-group__element--link' if item.href and not item.disabled }}{{ ' luci-list-group__element--' + item.modifier if item.href and not item.disabled and item.modifier }}{{ ' luci-list-group__element--disabled' if item.disabled }}{{ ' luci-list-group__element--flex' if has_cells }}"
            >
                {{ item.text | safe }}
            </{{ element }}>
        </span>

        {% for contextual_icon in item.contextual_icons %}
        <span class="luci-list-group__contextual-cell">
            {% set icon_element = 'button' if not item.disabled else 'span' %}
            <{{ icon_element }} 
            {% if element === 'button' %}
            role="button"
            {% endif %}
            class="luci-list-group__element{{ ' luci-list-group__element--link' if item.href and not item.disabled }}{{ ' luci-list-group__element--' + item.modifier if item.href and not item.disabled and item.modifier }}{{ ' luci-list-group__element--disabled' if item.disabled }}{{ ' luci-list-group__element--flex' if has_cells }}"
            >
                {{ icon(name=contextual_icon.name, class="luci-icon") }}
            </{{ icon_element }}>
        </span>
        {% endfor %}
    </span>
{% endmacro %}


{% macro notification(
    class,
    heading=false,
    text=false,
    icon_left="info",
    icon_path=false,
    close=false,
    describedby=false
  ) %}
  <div class="luci-notification{{ " " + class if class }}"
    {% if class and "warning" in class %}
      {% set icon_left = "warning" %}
    {% endif %}
    {% if class and "error" in class %}
      {% set icon_left = "error" %}
    {% endif %}
    {% if class and "success" in class %}
      {% set icon_left = "success" %}
    {% endif %}
    {% if close %}
      role="alertdialog"
    {% else %}
      role="alert"
    {% endif %}
    {% if describedby %}
      aria-describedby="{{ describedby }}"
    {% endif %}>
    <span class="luci-notification__inner">
      {% if icon_left %}
          {{ icon(class="luci-icon--size-sm luci-notification__icon", name=icon_left, path=icon_path) }}
      {% endif %}
      <div class="luci-notification__text" {% if describedby %}
        id="{{ describedby }}"
      {% endif %}>
        {% if heading %}
          <div class="luci-notification__heading">
            {{ heading | safe }}
          </div>
        </h3>
        {% endif %}
        {% if text %}
          <div class="luci-notification__description">
            {{ text | safe }}
          </div>
        {% endif %}
      </div>
      {% if close %}
        {{ button(class="luci-button--icon-only luci-button--flat luci-button--small luci-notification__button--close", icon_left="close") }}
      {% endif %}
    </span>
  </div>
{% endmacro %}

{% macro search(
    class=false, 
    search_id, 
    autosuggest=false, 
    search_placeholder, 
    search_value, 
    search_label) %}

  <div class="luci-search{{ " " + class if class }}" role="search">
    {% call form_field_group(class="luci-search__form-field-group") %}
      {{ form_label(name=search_label, class="luci-search__form-label", for=search_id) }}
      {{ form_input(input_type="search", class="luci-search__form-input", input_id=search_id, describedby=search_id, placeholder=search_placeholder, value=search_value) }}
      {{ button(icon_left="close", class="luci-button--icon-only luci-button--flat luci-search__button-close luci-search__button-close--is-hidden") }}
      {{ button(text="Search", icon_left="search", class="luci-button--icon-only luci-button--flat luci-search__button") }}
    {% endcall %}
    {% if autosuggest %}
      <div class="luci-container--light luci-search__suggest luci-search__suggest--is-hidden">
        <ul class="luci-list-group luci-search__suggest-group"></ul>
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% macro popover(
    class=false,
    heading=false,
    description=false,
    trigger={
      type: "button",
      props: {
        text: "Button Trigger",
        class: "luci-button--secondary"
      }
    },
    cancel_button_text=false,
    action_button_text=false
) %}
    <div class="luci-popover{{ ' ' + class if class }}">
      {{ popover_trigger_element(trigger=trigger) }}
      <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
              {% if heading %}
                <h6 class="luci-popover__heading">{{ heading }}</h6>
              {% endif %}
              {% if description %}
                {% for item in description %}
                  <div class="luci-popover__description">{{ item | safe }}</div>
                {% endfor %}
              {% endif %}
              {% if caller %}
                <div class="luci-popover__description">
                  {{ caller() }}
                </div>
              {% endif %}
              {% if cancel_button_text or action_button_text %}
                <div class="luci-popover__footer">
                  <div class="luci-popover__footer-cell luci-popover__footer-cell--primary">
                    {% if action_button_text %}
                      {{ button(class="luci-button--primary luci-popover__action", text=action_button_text) }}
                    {% endif %}
                  </div>
                  
                  <div class="luci-popover__footer-cell luci-popover__footer-cell--cancel">
                    {% if cancel_button_text %}
                      {{ link(class="luci-popover__action", text=cancel_button_text, element="button") }}
                    {% endif %}
                  </div>
                </div>
              {% endif %}
              {{ button(
                class="luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss",
                icon_left="close"
              ) }}
            </div>
        </div>
      </div>
    </div>
{% endmacro %}

{% macro popover_trigger_element(
    trigger={
      type: "button",
      props: {
        text: "Button Trigger",
        class: "luci-button--secondary"
      }
    }
) %}
  {% set trigger_element %}
    {{ getContext(trigger.type)(
        text=trigger.props.text,
        class=trigger.props.class + ' luci-popover__trigger',
        icon_left= trigger.props.icon_left,
        custom_attr_array=[
          {
            name: 'aria-expanded',
            value: 'false'
          },
          {
            name: 'aria-haspopup',
            value: 'true'
          }
        ]
      ) }}
  {% endset %}

  {% if trigger.button_group.props %}
    <div class="luci-button-group">
      {{ button(text=trigger.button_group.props.text, class=trigger.button_group.props.class) }}
      {{ trigger_element | safe }}
    </div>
  {% else %}
    {{ trigger_element | safe }}
  {% endif %}
{% endmacro %}

{% macro table(
  class,
  table_class,
  caption,
  selected=false,
  show_hide=false,
  headers,
  data,
  id=false,
  show_hide_checkboxes=[]) %}
  <div class="luci-table{{ " " + class if class }}">
    {% if caller %}
      {{ caller() }}
    {% endif %}
    <table class="luci-table__table{{ " " + table_class if table_class }}" {% if id %} id="{{ id }}" {% endif %}>
      {% if caption %}
        <caption>{{ caption }}</caption>
      {% endif %}
      <thead>
        <tr>
          {% if selected  %}
            <th scope="col" class="luci-table__header-select">
              {{ form_checkbox(checked=false, label=false, input_id=range(0, 100000) | random) }}
            </th>
          {% endif %}
          {% for column in headers %}
            <th class="{{ ' ' + column.class if column.class }}{{ ' luci-table__header-cell-sort--sorting' if column.sort }}" scope="col" {% if column.sort %} aria-sort="{{ column.sort }}" tabindex="0" {% endif %}>
              {% if column.show_hide %}
                  {% call menu(
                      class="luci-menu--left",
                      body_padding=false,
                      action_button_text="Submit",
                      trigger={
                        type: "button",
                        props: {
                          class: "luci-button--icon-only luci-button--small",
                          icon_left: "add"
                        }
                      }
                  ) %}
                    {% set show_hide_checkboxes = [] %}
                    {% for column in headers %}
                      {% if not column.show_hide and not (column.class and 'inline-edit-button' in column.class) %}
                        {% set list_data = {
                            'text': column.text,
                            'checked': true
                        } %}
                        {% set show_hide_checkboxes = (show_hide_checkboxes.push(list_data), show_hide_checkboxes) %}
                      {% endif %}
                    {% endfor %}
                    {{ list_group(list=[
                      {
                          "text":"Show/Hide Columns",
                          "heading":true
                      },
                      {
                          "checkboxes": show_hide_checkboxes
                      }
                    ]) }}
                  {% endcall %}
              {% else %}
                {% if column.class and 'column-control' in column.class %}
                  {% if column.menu %}
                    {% call menu(
                      class="luci-menu--left" if loop.last,
                      body_padding=false,
                      trigger={
                        type: "button",
                        props: {
                          class: "luci-button--icon-only luci-button--small luci-button--flat",
                          icon_left: "more"
                        }
                      }
                    ) %}
                      {{ list_group(list=[
                            {
                                "text":"Freeze column",
                                "href":"#",
                                "modifier":"table-inline-action"
                            },
                            {
                                "text":"Hide column",
                                "href":"#",
                                "modifier":"table-inline-action"
                            }
                        ]) }}
                    {% endcall %}
                  {% else %}
                    {{ button(
                      class="luci-button--icon-only luci-button--flat luci-button--small luci-button--toggle-icon",
                      icon_left=column.icon if column.icon else "lock-open",
                      custom_attr_array=[
                        {
                          name: 'data-toggle-icon-on',
                          value: 'lock'
                        },
                        {
                          name: 'data-toggle-icon-off',
                          value: 'lock-open'
                        }
                      ]
                    ) }}
                  {% endif %}
                {% endif %}
                {% if column.sort %}
                  <span class="luci-table__sort-label">
                    {{ column.text | safe }}
                  </span>
                {% else %}
                  {{ column.text | safe }}
                {% endif %}
              </th>
            {% endif %}
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in data %}
          <tr {% if row.class or row.expandable %} class="{{ 'luci-table__row--expandable' if row.expandable }}{{ ' ' + row.class if row.class }}" {% endif %}>
            {% if selected %}
              {% set checked = row.checked %}
              <td>{{ form_checkbox(checked=checked, label=false, input_id=range(0, 100000) | random) }}</td>
            {% endif %}
            {% for cell in row.data %}
              <td {% if cell.class %} class="{{ cell.class }}" {% endif %}{% if cell.colspan %} colspan="{{ cell.colspan }}" {% endif %}>
                {% if  cell.class and 'inline-edit-action' in cell.class %}
                    {% call menu(
                      class="luci-menu--left" if loop.index !== 1,
                      body_padding=false,
                      trigger={
                        type: "button",
                        props: {
                          class: "luci-button--icon-only luci-button--small luci-button--flat",
                          icon_left: "more"
                        }
                      }
                    ) %}
                      {{ list_group(list=[
                            {
                                "text":"Edit row",
                                "href":"#",
                                "modifier":"table-inline-action luci-table__action--inline-edit"
                            },
                            {
                                "text":"Delete row",
                                "href":"#",
                                "modifier":"table-inline-action luci-table__action--inline-delete"
                            },
                            {
                                "text":"Clone row",
                                "href":"#",
                                "modifier":"table-inline-action luci-table__action--inline-clone"
                            },
                            {
                                "text":"Freeze row",
                                "href":"#",
                                "modifier":"table-inline-action"
                            },
                            {
                                "text":"Add child row",
                                "href":"#",
                                "modifier":"table-inline-action"
                            }
                        ]) }}
                    {% endcall %}
                {% endif %}
                {% if cell.class and 'inline-edit-icon' in cell.class %}
                  {{ button(class="luci-button--icon-only luci-button--flat luci-button--small luci-table__action--inline-" + cell.icon, icon_left=cell.icon) }}
                {% endif %}
                {% if cell.class and 'inline-edit-button' in cell.class %}
                  {{ button(class="luci-button--icon-only luci-button--flat luci-button--small luci-button--inline-edit luci-button--inline-edit-" + cell.icon, icon_left=cell.icon) }}
                {% endif %}
                {% if cell.class and 'searchable' in cell.class %}
                  {{ form_combo_box(name="comboBox", input_id="comboBox") }}
                {% endif %}
                {% if cell.status == 'warning' or cell.status == '' %}
                  <div class="luci-table__cell-status">
                    {% if cell.status == 'warning' %}
                      {{ icon(name=cell.status, class="luci-icon--size-sm luci-icon-" + cell.status) }}
                    {% endif %}
                    <span class="luci-table__cell-status-text">{{ cell.text }}</span>
                  </div>
                {% else %}
                  {% if row.expandable and cell.class === 'luci-table__cell--indent' %}
                    {{ button(class="luci-table--expand-button luci-button--icon-only luci-button--flat luci-button--small", icon_left="expand") }}
                  {% endif %}
                  {{ cell.text | safe }}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endmacro %}

{% macro tab(class=false, tabs, id=false) %}
  <div class="luci-tab{{ " " + class if class }}">
    <div class="luci-tab__nav">
      <ul class="luci-tab__list" role="tablist">
        {% for tab in tabs %}
          <li class="luci-tab__list-item {% if tab.active %}luci-tab__list-item--is-active{% endif %}" role="presentation">
            {% if tab.icon_left %}
              {{ icon(name=tab.icon_left, class=tab.icon_class) }}
            {% endif %}
            {{ link(text=tab.title, href='#' + tab.id, custom_attr_array=[ { name: 'role', value: 'tab' }, { name: 'id', value: tab.id }, { name: 'aria-controls', value: tab.id } ]) }}
            {% if tab.icon_right %}
              {{ icon(name=tab.icon_right, class=tab.icon_class) }}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
    <div class="luci-tab__content">
      {% for tab in tabs %}
        <div class="luci-tab__panel {% if tab.active %}luci-tab__panel--is-active{% endif %}" id="{{tab.id}}" role="tabpanel" aria-labeledby="{{ tab.id }}">
          {% if tab.nested %}
            <ul class="luci-tab__list luci-tab__list--nested">
              {% for tab in tab.nested %}
                  <li class="luci-tab__list-item {% if tab.active %}luci-tab__list-item--is-active{% endif %}">
                    {{ link(text=tab.title, href='#' + tab.id, custom_attr_array=[ { name: 'role', value: 'tab' }, { name: 'id', value: tab.id }, { name: 'aria-controls', value: tab.id } ]) }}
                  </li>
              {% endfor %}
            </ul>
          {% endif %}

          {% if caller %}
            {{ caller() }}
            {% else %}
              {% if tab.content %}
                  {{ tab.content | safe }}
                  {# {% else %}
                    <h2>Tab {{ loop.index }} Content</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ullam eius aliquam labore provident hic nisi perferendis. Velit sed, asperiores, fugiat assumenda saepe optio numquam commodi maxime, hic, adipisci at!</p> #}
              {% endif %}
              {% if tab.nested %}
                {% for tab in tab.nested %}
                    <div class="luci-tab__panel--nested {% if tab.active %}luci-tab__panel--is-active{% endif %}" id="{{ tab.id }}" role="tabpanel" aria-labeledby="{{ tab.id }}">
                      {% if tab.content %}
                          {{ tab.content | safe }}
                      {% endif %}
                    </div>
                {% endfor %}
              {% endif %}
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
{% endmacro %}

{% macro tooltip(
    class=false,  
    content,
    element="span",
    tooltip_id=false
  ) %}
    {% if tooltip_id == false %}
      {% set tooltip_id = "luci-tooltip-" + range(0, 100000) | random %}
    {% endif %}
    <{{ element }} class="luci-tooltip{{ ' ' + class if class }}">
        <{{ element }} class="luci-tooltip__trigger" aria-describedby="{{tooltip_id}}">
            {{ caller() }}
        </{{ element }}> 
        <{{ element }} class="luci-tooltip__content" role="tooltip" id="{{tooltip_id}}">
            <{{ element }} class="luci-tooltip__content-inner">
                <{{ element }} class="luci-tooltip__text">
                    {{ content | safe }}
                </{{ element }}>
            </{{ element }}>
        </{{ element }}>
    </{{ element }}>
{% endmacro %}

{% macro tag(
    class=false,
    text=false,
    item_class=false,
    dismissible=false,
    tags=[
      {
        text:'Tag label 1',
        dismissible: false
      },
      {
        text:'Tag label 2',
        dismissible: true
      }
    ]
) %}
    {% if text %}
      {% set tags = [{text:text, class:item_class, dismissible:dismissible}] %}
    {% endif %}
    <ul class="luci-tag{{ ' ' + class if class }}">
      {% for item in tags %}
        <li class="luci-tag__item{{ ' ' + item.class if item.class }}">
            {{ item.text }}
            {% if item.dismissible %}
              <button class="luci-tag__button">
                {{icon(name="close", class="luci-icon--size-xs luci-tag__button-icon")}}
              </button>
            {% endif %}
        </li>
      {% endfor %}
    </ul>
{% endmacro %}