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

{% do view.registerAssetBundle('typedlinkfield\\utilities\\CpAssetBundle') %}

{% set type = singleType ? singleType : ( value.type is defined and value.type ? value.type : null) %}

<div class="linkfield{% if hasSettings %} withSettings{% endif %}" id="{{ name }}">
  {% if linkNames|length == 0 %}
    <p>{{ 'No link types available.'|t('typedlinkfield') }}</p>
  {% else %}
    <div class="linkfield--field{% if hasSettings %} field{% endif %}">
      {% if singleType %}
        <input type="hidden" id="{{ name }}-type" name="{{ name }}[type]" value="{{ type }}" />
      {% else %}
        <div class="linkfield--type">
          {{ forms.select({
            disabled: isStatic,
            id: name~'-Type',
            name: name~'[type]',
            options: linkNames,
            value: type
          }) }}
        </div>
      {% endif %}

      <div class="linkfield--typeOptions{% if singleType %} single{% endif %}">
        {{ linkInputs|raw }}
      </div>

      {% if settings.allowTarget %}
        <div class="linkfield--target">
          {{ forms.checkboxField({
            disabled: isStatic,
            id: name~'-Target',
            name: name~'[target]',
            value: '_blank',
            label: 'Open in new window?'|t('typedlinkfield'),
            checked: value.target is defined and value.target == '_blank' ? true : null
          }) }}
        </div>
      {% endif %}
    </div>

    {% if hasSettings %}
      <div class="linkfield--settings{{ type == '' ? ' hidden' }}">
        {% if settings.allowCustomText %}
          {{ forms.textField({
            disabled: isStatic,
            id: name~'-customText',
            name: name~'[customText]',
            placeholder: settings.defaultText == '' ? 'Custom link text'|t('typedlinkfield') : settings.defaultText|t('site'),
            label: 'Custom link text'|t('typedlinkfield'),
            value: value.customText is defined and value.customText ? value.customText
          }) }}
        {% endif %}

        {% if settings.enableAriaLabel %}
          {{ forms.textField({
            disabled: isStatic,
            id: name~'-AriaLabel',
            name: name~'[ariaLabel]',
            label: 'Aria label'|t('typedlinkfield'),
            value: value.ariaLabel is defined ? value.ariaLabel : ""
          }) }}
        {% endif %}

        {% if settings.enableTitle %}
          {{ forms.textField({
            disabled: isStatic,
            id: name~'-Title',
            name: name~'[title]',
            label: 'Title'|t('typedlinkfield'),
            value: value.title is defined ? value.title : ""
          }) }}
        {% endif %}
      </div>
    {% endif %}
  {% endif %}

  <input type="hidden" id="{{ name }}-isCpFormData" name="{{ name }}[isCpFormData]" value="true" />
</div>

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