{% import '_includes/forms' as forms %}

{% do view.registerAssetBundle('typedlinkfield\\utilities\\CpAdminAssetBundle') %}
{% set group = '' %}

<div class="linkFieldAdmin" id="{{ name }}">
  <div class="linkFieldAdmin--tabs">
    <div class="linkFieldAdmin--tabsRow selected" data-name="_general">
      <button class="linkFieldAdmin--tabsTab">{{ 'General settings'|t('typedlinkfield') }}</button>
    </div>

    <div class="linkFieldAdmin--tabsRow all">
      <div class="linkFieldAdmin--tabsLightswitch">
        {{- forms.lightswitch({
          name: 'allowedLinkNames[]',
          on: allTypesAllowed,
          value: '*',
        }) -}}
      </div>
      {{ 'Enable all'|t('typedlinkfield') }}
    </div>

    {%- for linkType in linkTypes -%}
      {%- if linkType.group != group -%}
        {%- set group = linkType.group -%}
        <div class="linkFieldAdmin--tabsGroup">{{ group }}</div>
      {%- endif -%}

      <div class="linkFieldAdmin--tabsRow" data-name="{{ linkType.name }}">
        <div class="linkFieldAdmin--tabsLightswitch{% if allTypesAllowed %} hidden{% endif %}">
          {{- forms.lightswitch({
            name: 'allowedLinkNames[]',
            on: linkType.enabled,
            value: linkType.name,
          }) -}}
        </div>

        <button class="linkFieldAdmin--tabsTab">
          {{- linkType.displayName -}}
        </button>
      </div>
    {%- endfor -%}
  </div>
  <div class="linkFieldAdmin--body">
    <div class="linkFieldAdmin--bodyContent selected" data-name="_general">
      {% include 'typedlinkfield/_settings-general' %}
    </div>

    {%- for linkType in linkTypes -%}
      <div class="linkFieldAdmin--bodyContent" data-name="{{ linkType.name }}">
        {{- linkType.settings|raw -}}
      </div>
    {%- endfor -%}
  </div>
</div>

{% js %}
  new LinkFieldAdmin("{{ nameNs }}");
{% endjs %}