{#
/**
 * @file
 * CivicTheme Checkbox component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - name: [string] DOM name (required).
 * - id: [string] DOM id (required).
 * - value: [string] DOM value.
 * - label: [string] Label content.
 * - is_checked: [boolean] Whether the checkbox is checked.
 * - is_required: [boolean] Whether the checkbox is required.
 * - is_invalid: [boolean] Whether the checkbox is invalid.
 * - is_disabled: [boolean] Whether the checkbox is disabled.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set is_invalid_class = is_invalid ? 'ct-checkbox--is-invalid' : '' %}
{% set modifier_class = '%s %s %s'|format(theme_class, is_invalid_class, modifier_class|default(''))|trim %}

{% if name is not empty and id is not empty %}
  <input
    type="checkbox"
    class="ct-checkbox {{ modifier_class -}}"
    name="{{ name }}"
    value="{{ value }}"
    id="{{ id }}"
    {% if is_checked %}checked{% endif %}
    {% if is_required %}required{% endif %}
    {% if is_disabled %}disabled{% endif %}
    {% if is_invalid %}aria-invalid="true"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  />
  {% if label is not empty %}
    {% include 'civictheme:label' with {
      theme: theme,
      content: label,
      for: id,
      size: 'small',
      modifier_class: 'ct-checkbox__label',
    } only %}
  {% endif %}
{% endif %}
