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

{% macro spanToggle(input, length) %}
  {% set space = repeat('&nbsp;&nbsp;', (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 %}
    {% set value = (value is same as(false) ? 0 : value) %}

    {% if field.force_bool and get_type(value) == 'string'%}
        {% set value = true %}
    {% endif %}


  <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 %}

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

      <input type="radio"
             value="{{ key }}"
             id="{{ id }}"
             name="{{ (scope ~ field.name)|fieldName }}"
          {% if field.highlight is defined %}
            class="{{ field.highlight == '' ~ key ? 'highlight' : '' }}"
          {% endif %}
          {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
          {% if field.toggleable %}
            {% if '' ~ key == '' ~ value %}
              checked="checked"
            {% elseif value is defined and (key == 1 or key == '1') %}
              checked="checked"
            {% endif %}
          {% else %}
            {% if '' ~ key == '' ~ value %}
              checked="checked"
            {% endif %}
          {% endif %}
          {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
          {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
      />
      <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
    {% endfor %}
  </div>
{% endblock %}
