{# @description One item in the mobile dock: a drawer toggle, a link, or an inert button. #}
{# @prop active:boolean | description:"Marks the item as the current page." #}
{# @prop icon:text | description:"Icon name." #}
{# @prop label:text | description:"Item label, shown under the icon." #}
{# @prop href:text | description:"Link target; renders an anchor when given and toggle is not." #}
{# @prop toggle:text | description:"id of the drawer checkbox this item flips; renders a label when given." #}
{# @prop class:text | description:"Extra classes on the root element." #}
{% load i18n %}
<c-vars active icon label href toggle class />
{% if toggle %}
  <label for="{{ toggle }}"
         role="button"
         tabindex="0"
         aria-label="{{ label }}"
         class="{% if active %}dock-active{% endif %} {{ class }}"
         {{ attrs }}>
    {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
    {% if label %}<span class="dock-label">{{ label }}</span>{% endif %}
  </label>
{% elif href %}
  <a href="{{ href }}"
     class="{% if active %}dock-active{% endif %} {{ class }}"
     {% if active %}aria-current="page"{% endif %}
     {{ attrs }}>
    {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
    {% if label %}<span class="dock-label">{{ label }}</span>{% endif %}
  </a>
{% else %}
  <button class="{% if active %}dock-active{% endif %} {{ class }}" {{ attrs }}>
    {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
    {% if label %}<span class="dock-label">{{ label }}</span>{% endif %}
  </button>
{% endif %}