{#
 # Shared sub-field item partial (header + body).
 #
 # Variables:
 #   sf               – sub-field object (or null for new/template)
 #   parent_index     – parent repeater field index (int or "__PARENT_INDEX__" placeholder)
 #   sub_field_types  – available sub-field type map
 #   is_template      – true when rendering inside a <template> tag (new sub-fields)
 #}
{% set sfSettings = (sf and sf.settings) ? (sf.settings is iterable ? sf.settings : sf.settings|json_decode) : {} %}
{% set sfImageConfig = sfSettings.image_settings ?? {} %}

<div class="sub-field-item{{ is_template ? '' : ' collapsed' }}">
    <div class="sub-field-header" onclick="toggleSubField(this)">
        <span class="sub-field-drag"><i class="fa fa-bars"></i></span>
        <span class="sub-field-title">{{ sf ? sf.name : 'New Sub-field' }}</span>
        <span class="sub-field-type-badge">{{ sf ? sf.type : 'text' }}</span>
        <button type="button" class="btn-remove-subfield" onclick="event.stopPropagation(); removeSubField(this)">
            <i class="fa fa-times"></i>
        </button>
    </div>
    <div class="sub-field-body">
        <input type="hidden" name="subfield_parent_index[]" value="{{ parent_index }}">
        <input type="hidden" name="subfield_label[]" value="{{ sf ? (sf.label ?? sf.name) : '' }}">
        <div class="field-row">
            <label>Name</label>
            <input type="text" name="subfield_name[]" value="{{ sf ? sf.name : '' }}" placeholder="Field Name" required>
        </div>
        <div class="field-row">
            <label>Type</label>
            <select name="subfield_type[]" onchange="updateSubFieldOptions(this)">
                {% for type, typeLabel in sub_field_types %}
                    <option value="{{ type }}" {{ sf and sf.type == type ? 'selected' : '' }}>{{ typeLabel }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field-row">
            <label>CSS Class</label>
            <input type="text" name="subfield_css_class[]" value="{{ sf ? sf.css_class : '' }}" placeholder="optional">
        </div>
        <div class="field-row field-options-row" style="{{ sf and sf.type in ['select', 'radio', 'checkbox'] ? '' : 'display:none' }}">
            <label>Options</label>
            <textarea name="subfield_options[]" placeholder="option1|Label 1&#10;option2|Label 2">{{ sf ? sf.options : '' }}</textarea>
        </div>
        <div class="field-row">
            <label>Info Text</label>
            <input type="text" name="subfield_info[]" value="{{ sf ? sf.info : '' }}" placeholder="Helper text shown to editors">
        </div>
        <div class="field-row inline-checkboxes">
            <label>
                <input type="checkbox" name="subfield_required[]" value="1" {{ sf and sf.required ? 'checked' : '' }}>
                Required
            </label>
        </div>

        {% include 'admin/block_registry/_image_settings.twig' with {
            crop_name: 'subfield_crop_enabled[]',
            ratio_name: 'subfield_aspect_ratio[]',
            custom_ratio_name: 'subfield_custom_ratio[]',
            srcset_name: 'subfield_srcset_sizes[]',
            image_config: sfImageConfig,
            use_hidden_flag: true,
            field_type: sf ? sf.type : 'text',
        } only %}

        {# Conditional visibility settings #}
        {% set sfVisConfig = sfSettings.visibility ?? {} %}
        <div class="visibility-settings">
            <div class="visibility-settings-header">Conditional Visibility</div>
            <div class="field-row">
                <label>Depends on field</label>
                <select name="subfield_visibility_field[]"
                        class="visibility-field-select visibility-subfield-select"
                        onchange="updateVisibilityValues(this)"
                        data-value="{{ sfVisConfig.field ?? '' }}">
                    <option value="">Always visible</option>
                </select>
            </div>
            <div class="field-row visibility-values-row" style="{{ sfVisConfig.field is defined and sfVisConfig.field is not empty ? '' : 'display:none' }}">
                <label>Show when value is</label>
                <div class="visibility-values-checkboxes"></div>
                <input type="hidden" name="subfield_visibility_values[]"
                       class="visibility-values-hidden"
                       value="{{ sfVisConfig.values is defined ? sfVisConfig.values|join(',') : '' }}">
            </div>
        </div>
    </div>
</div>
