{% extends "forms/field.html.twig" %}

{% macro spanToggle(input, length) %}
  {% set space = repeat('  ', (length - input|length) / 2) %}
  {{ (space ~ input ~ space)|raw }}
{% endmacro %}

{% import _self as macro %}

{% set has_hidden = false %}
{% for key, text in field.options %}
  {% if key is empty %}
    {% set has_hidden = true %}
  {% endif %}
{% endfor %}

{% block global_attributes %}
  {{ parent() }}
  data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
{% endblock %}

{% block input %}
  <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }} {{ field.classes }}">
    {% set maxLen = 0 %}
    {% for text in field.options %}
      {% set translation = text|t|trim %}
      {% set maxLen = max(translation|length, maxLen) %}
    {% endfor %}

    {# Value falls back to highlight instead of default #}
    {% set highlight = field.highlight|string %}
    {% set value = (value ?? default ?? highlight)|string %}

    {% for key, text in field.options %}
      {% set key = key|string %}
      {% set id = (field.id ?? ("toggle_" ~ field.name)) ~ key %}
      {% set translation = text|t|trim %}

      <input type="radio"
             value="{{ key }}"
             id="{{ id }}"
             name="{{ (scope ~ field.name)|fieldName }}"
             {% if highlight is same as(key) %}class="highlight"{% endif %}
             {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
             {% if key is same as(value) %}checked="checked"{% endif %}
             {% if required %}required="required"{% endif %}
             {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
      />
      <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
    {% endfor %}
  </div>
{% endblock %}