{#
    Repeater sub-field input partial
    Used by both live rows and template rows in edit_data.twig

    Variables:
    - field:       parent repeater field object
    - subField:    the sub-field definition
    - row_index:   integer for live rows, '__ROW_INDEX__' for template rows
    - value:       current value (or '' for template rows)
    - is_template: boolean — controls whether values/selected attributes are output
    - sfFieldId:   pre-computed field ID string (field.name ~ '_' ~ row_index ~ '_' ~ subField.name)
    - sfSettings:  parsed sub-field settings object
    - sfImageConfig: parsed image config from settings
    - sfCropEnabled: boolean for crop enabled
#}
{% set sfVis = sfSettings.visibility ?? null %}
<div class="repeater-subfield" data-subfield-name="{{ subField.name }}"{% if sfVis %} data-visibility-field="{{ sfVis.field }}" data-visibility-values="{{ sfVis.values|join(',') }}"{% endif %}>
    <label>
        {{ subField.label ?? subField.name }}
        {% if subField.required %}<span class="required">*</span>{% endif %}
    </label>

    {% if subField.type == 'textarea' %}
        <textarea
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            rows="3"
            {% if not is_template and subField.required %}required{% endif %}
        >{{ not is_template ? value : '' }}</textarea>

    {% elseif subField.type == 'richtext' or subField.type == 'wysiwyg' %}
        <textarea
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="wysiwyg {{ subField.css_class }}"
            rows="6"
            {% if not is_template and subField.required %}required{% endif %}
        >{{ not is_template ? value : '' }}</textarea>

    {% elseif subField.type == 'image' %}
        {% set imgUrl = (not is_template and value.url is defined) ? value.url : ((not is_template) ? value : '') %}
        {% set imgAlt = (not is_template and value.alt is defined) ? value.alt : '' %}
        {% set imgCrop = (not is_template and value.crop is defined) ? value.crop : {} %}
        <div class="image-field-wrapper">
            <div class="file-field">
                <input
                    type="text"
                    name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][url]"
                    id="field_{{ sfFieldId }}_url"
                    class="{{ subField.css_class }} image-url-input"
                    value="{{ imgUrl }}"
                    placeholder="Image URL"
                    data-field-name="{{ sfFieldId }}"
                    data-crop-enabled="{{ sfCropEnabled ? '1' : '0' }}"
                >
                <button type="button" class="btn btn-small" onclick="openMediaPicker('field_{{ sfFieldId }}_url')">
                    <i class="fa fa-folder-open"></i>
                </button>
            </div>
            <div class="alt-text-field">
                <label for="field_{{ sfFieldId }}_alt">Alt Text</label>
                <input
                    type="text"
                    name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][alt]"
                    id="field_{{ sfFieldId }}_alt"
                    value="{{ imgAlt }}"
                    placeholder="Describe the image for accessibility"
                >
            </div>
            {% if sfCropEnabled %}
                <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][crop][x]" id="field_{{ sfFieldId }}_crop_x" value="{{ imgCrop.x ?? 0 }}">
                <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][crop][y]" id="field_{{ sfFieldId }}_crop_y" value="{{ imgCrop.y ?? 0 }}">
                <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][crop][width]" id="field_{{ sfFieldId }}_crop_width" value="{{ imgCrop.width ?? 0 }}">
                <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][crop][height]" id="field_{{ sfFieldId }}_crop_height" value="{{ imgCrop.height ?? 0 }}">

                <div class="crop-controls" {% if not imgUrl %}style="display: none;"{% endif %} id="crop_{{ sfFieldId }}_controls">
                    <span class="crop-info--sm">
                        {% if sfImageConfig.aspect_ratio %}Aspect ratio: {{ sfImageConfig.aspect_ratio }}{% else %}Free crop{% endif %}
                    </span>
                    <button type="button" class="btn btn-small btn-reset-crop" onclick="resetCrop('{{ sfFieldId }}')">
                        <i class="fa fa-refresh"></i> Reset
                    </button>
                </div>

                <div id="crop_{{ sfFieldId }}_warning" class="crop-warning--sm" style="display: none;"></div>

                <div class="crop-container" id="crop_{{ sfFieldId }}_container" {% if not imgUrl %}style="display: none;"{% endif %}>
                    <div class="crop-image-wrapper">
                        <img {% if imgUrl %}src="{{ imgUrl }}"{% endif %}
                             id="crop_{{ sfFieldId }}_image"
                             class="crop-target"
                             data-field-name="{{ sfFieldId }}"
                             data-aspect-ratio="{{ sfImageConfig.aspect_ratio ?? '' }}"
                             data-min-width="{{ sfImageConfig.srcset_sizes is defined ? min(sfImageConfig.srcset_sizes) : 0 }}"
                             data-max-width="{{ sfImageConfig.srcset_sizes is defined ? max(sfImageConfig.srcset_sizes) : 0 }}"
                             >
                    </div>
                </div>
            {% else %}
                {% if imgUrl %}
                <div class="image-preview">
                    <img src="{{ imgUrl }}" alt="{{ imgAlt }}">
                </div>
                {% endif %}
            {% endif %}
        </div>

    {% elseif subField.type == 'select' %}
        <select name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]" class="{{ subField.css_class }}">
            <option value="">-- Select --</option>
            {% if subField.options %}
            {% set options = subField.options|split("\n") %}
            {% for option in options %}
                {% set parts = option|split('|') %}
                {% set optValue = parts[0]|trim %}
                {% set optLabel = parts[1]|default(parts[0])|trim %}
                <option value="{{ optValue }}" {{ (not is_template and value == optValue) ? 'selected' : '' }}>{{ optLabel }}</option>
            {% endfor %}
            {% endif %}
        </select>

    {% elseif subField.type == 'product_selector' %}
        {% set psFieldId = 'field_' ~ field.name ~ '_' ~ row_index ~ '_' ~ subField.name %}
        <div class="product-selector-wrapper">
            <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]" id="{{ psFieldId }}" value="{{ not is_template ? value : '' }}">
            <input type="text" id="{{ psFieldId }}_name" class="product-selector-name" value="" readonly placeholder="No product selected">
            <button type="button" class="btn btn-small" onclick="window.open('/shop/admin/products/manage.products.mini.php?field={{ psFieldId }}', 'productPicker', 'status=yes,scrollbars=yes,resizable=yes,width=500,height=600')">
                <i class="fa fa-search"></i> Browse
            </button>
            <button type="button" class="btn btn-small btn-link" onclick="document.getElementById('{{ psFieldId }}').value=''; document.getElementById('{{ psFieldId }}_name').value=''; document.getElementById('{{ psFieldId }}').dispatchEvent(new Event('change'));">
                <i class="fa fa-times"></i>
            </button>
        </div>

    {% elseif subField.type == 'page_selector' %}
        {% set psSfSettings = subField.settings ? (subField.settings is iterable ? subField.settings : subField.settings|json_decode) : {} %}
        {% set psSfConfig = psSfSettings.page_selector_settings ?? {} %}
        {% set psSfContainerId = psSfConfig.container_id ?? '' %}
        {% set psSubFieldId = 'field_' ~ field.name ~ '_' ~ row_index ~ '_' ~ subField.name %}
        <div class="page-selector-wrapper" data-container-id="{{ psSfContainerId }}">
            <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]" id="{{ psSubFieldId }}" value="{{ not is_template ? value : '' }}">
            <input type="text" id="{{ psSubFieldId }}_display" class="page-selector-display" value="" readonly placeholder="No page selected">
            <button type="button" class="btn btn-small" onclick="openPagePicker('{{ psSubFieldId }}', '{{ psSfContainerId }}')">
                <i class="fa fa-search"></i> Browse
            </button>
            <button type="button" class="btn btn-small btn-link" onclick="clearPageSelector('{{ psSubFieldId }}')">
                <i class="fa fa-times"></i>
            </button>
        </div>

    {% elseif subField.type == 'link' %}
        {% set lnkUrl = (not is_template and value.url is defined) ? value.url : '' %}
        {% set lnkTitle = (not is_template and value.title is defined) ? value.title : '' %}
        {% set lnkTarget = (not is_template and value.target is defined) ? value.target : '' %}
        {% set lnkFieldId = field.name ~ '_' ~ row_index ~ '_' ~ subField.name %}
        <div class="link-field-wrapper" id="link_{{ lnkFieldId }}_wrapper">
            <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][url]" id="field_{{ lnkFieldId }}_url" value="{{ lnkUrl }}">
            <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][title]" id="field_{{ lnkFieldId }}_title" value="{{ lnkTitle }}">
            <input type="hidden" name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}][target]" id="field_{{ lnkFieldId }}_target" value="{{ lnkTarget }}">

            <div class="link-display" id="link_{{ lnkFieldId }}_display" style="{{ lnkUrl ? '' : 'display:none' }}">
                <span class="link-display-title" id="link_{{ lnkFieldId }}_display_title">{{ lnkTitle }}</span>
                <a class="link-display-url" id="link_{{ lnkFieldId }}_display_url" href="{{ lnkUrl }}" target="_blank">{{ lnkUrl }}</a>
                <span class="link-display-actions">
                    <a href="{{ lnkUrl }}" target="_blank" class="link-action" title="Open link"><i class="fa fa-external-link"></i></a>
                    <button type="button" class="link-action" onclick="openLinkPicker('{{ lnkFieldId }}')" title="Edit link"><i class="fa fa-pencil"></i></button>
                    <button type="button" class="link-action link-action--danger" onclick="clearLink('{{ lnkFieldId }}')" title="Remove link"><i class="fa fa-times"></i></button>
                </span>
            </div>
            <button type="button" class="btn btn-small" id="link_{{ lnkFieldId }}_select_btn" onclick="openLinkPicker('{{ lnkFieldId }}')" style="{{ lnkUrl ? 'display:none' : '' }}">
                <i class="fa fa-link"></i> Select Link
            </button>
        </div>

    {% elseif subField.type == 'checkbox' %}
        <input
            type="checkbox"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            value="1"
            {{ (not is_template and value == '1') ? 'checked' : '' }}
        >

    {% elseif subField.type == 'number' %}
        <input
            type="number"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            value="{{ not is_template ? value : '' }}"
            {% if not is_template and subField.required %}required{% endif %}
        >

    {% elseif subField.type == 'email' %}
        <input
            type="email"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            value="{{ not is_template ? value : '' }}"
            {% if not is_template and subField.required %}required{% endif %}
        >

    {% elseif subField.type == 'url' %}
        <input
            type="url"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            value="{{ not is_template ? value : '' }}"
            {% if not is_template and subField.required %}required{% endif %}
            placeholder="https://"
        >

    {% elseif subField.type == 'datetime' or subField.type == 'date' %}
        <input
            type="date"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            value="{{ not is_template ? value : '' }}"
            {% if not is_template and subField.required %}required{% endif %}
        >

    {% elseif subField.type == 'colorpicker' or subField.type == 'color' %}
        <input
            type="color"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            value="{{ (not is_template and value) ? value : '#000000' }}"
        >

    {% elseif subField.type == 'icon' %}
        {% set iconFieldId = 'field_' ~ field.name ~ '_' ~ row_index ~ '_' ~ subField.name %}
        <div class="icon-field-wrapper" id="icon_{{ iconFieldId }}_wrapper">
            <span class="icon-field-preview" id="icon_{{ iconFieldId }}_preview">
                {% if not is_template and value %}
                    <i class="{{ value }}"></i>
                {% else %}
                    <i class="fal fa-icons" style="opacity: 0.3;"></i>
                {% endif %}
            </span>
            <input
                type="text"
                name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
                id="{{ iconFieldId }}"
                class="{{ subField.css_class }} icon-field-input"
                value="{{ not is_template ? value : '' }}"
                placeholder="e.g. fal fa-users"
                data-field-id="{{ iconFieldId }}"
            >
            <button type="button" class="btn btn-small" onclick="openIconPicker('{{ iconFieldId }}')">
                <i class="fa fa-search"></i> Browse
            </button>
            <button type="button" class="btn btn-small btn-link" onclick="clearIconField('{{ iconFieldId }}')">
                <i class="fa fa-times"></i>
            </button>
        </div>

    {% else %}
        <input
            type="text"
            name="field_{{ field.name }}[{{ row_index }}][{{ subField.name }}]"
            class="{{ subField.css_class }}"
            value="{{ not is_template ? value : '' }}"
            {% if not is_template and subField.required %}required{% endif %}
        >
    {% endif %}

    {% if subField.info and subField.type != 'checkbox' %}
        <small class="field-info">{{ subField.info }}</small>
    {% endif %}
</div>
