{#
/**
 * @file
 * Theme override for a form element label.
 *
 * Available variables:
 * - title: The label's text.
 * - title_display: Elements title_display setting.
 * - required: An indicator for whether the associated form element is required.
 * - attributes: A list of HTML attributes for the label.
 *
 * @see template_preprocess_form_element_label()
 */
#}
{% set classes = [
  'form__label',
  title_display == 'after' ? 'option',
  title_display == 'invisible' ? 'visually-hidden',
  required ? 'js-form-required',
  required ? 'form-required',
] %}

{# unfortunately, Twig js doesn't understand the translate filter,
   so we can't use it for the Styleguide. Set a normal string for default values #}
{% set titleRequired = 'Required field'|t %}
{% set titleOptional = 'Optional'|t %}

{% if title is not empty or required -%}
  <label{{ attributes.addClass(classes) }}>
    {{ title }}
    <abbr class="form__label__required" title="{{titleRequired}}"{% if not required %} aria-hidden="true"{% endif %}>
      *
    </abbr>
    <span class="form__label__not-required" title="{{titleOptional}}"{% if required %} aria-hidden="true"{% endif %}>
      ({{ titleOptional }})
    </span>
  </label>
{%- endif %}
