{#
 # Shared image processing settings partial.
 #
 # Variables:
 #   crop_name        – form input name for crop enabled (e.g. "field_crop_enabled[3]" or "subfield_crop_enabled[]")
 #   ratio_name       – form input name for aspect ratio
 #   custom_ratio_name – form input name for custom ratio
 #   srcset_name      – form input name for srcset sizes
 #   image_config     – current image_settings object (or {} for new)
 #   use_hidden_flag  – true to use hidden+checkbox pattern (sub-fields), false for plain checkbox (fields)
 #   field_type       – type of the parent field (controls visibility)
 #}
{% set cropEnabled = image_config.crop_enabled ?? false %}
{% set presetRatios = ['', '16:9', '4:3', '1:1', '3:2', '21:9', '9:16'] %}
{% set currentRatio = image_config.aspect_ratio ?? '' %}
{% set isCustomRatio = currentRatio and currentRatio not in presetRatios %}

<div class="image-settings" style="{{ field_type == 'image' ? '' : 'display:none' }}">
    <div class="image-settings-header">Image Processing Settings</div>
    <div class="field-row">
        <label>
            {% if use_hidden_flag %}
                <input type="hidden" name="{{ crop_name }}" value="{{ cropEnabled ? '1' : '0' }}" class="subfield-crop-flag">
                <input type="checkbox" value="1"
                    {{ cropEnabled ? 'checked' : '' }}
                    onchange="this.previousElementSibling.value = this.checked ? '1' : '0'; toggleCropSettings(this)">
            {% else %}
                <input type="checkbox" name="{{ crop_name }}" value="1"
                    {{ cropEnabled ? 'checked' : '' }}
                    onchange="toggleCropSettings(this)">
            {% endif %}
            Enable crop &amp; responsive images
        </label>
    </div>
    <div class="crop-settings-detail" style="{{ cropEnabled ? '' : 'display:none' }}">
        <div class="field-row">
            <label>Aspect Ratio</label>
            <select name="{{ ratio_name }}" onchange="toggleCustomRatio(this)">
                <option value="">Free crop</option>
                <option value="16:9" {{ currentRatio == '16:9' ? 'selected' : '' }}>16:9 (Widescreen)</option>
                <option value="4:3" {{ currentRatio == '4:3' ? 'selected' : '' }}>4:3 (Standard)</option>
                <option value="1:1" {{ currentRatio == '1:1' ? 'selected' : '' }}>1:1 (Square)</option>
                <option value="3:2" {{ currentRatio == '3:2' ? 'selected' : '' }}>3:2 (Classic)</option>
                <option value="21:9" {{ currentRatio == '21:9' ? 'selected' : '' }}>21:9 (Ultrawide)</option>
                <option value="9:16" {{ currentRatio == '9:16' ? 'selected' : '' }}>9:16 (Portrait)</option>
                <option value="custom" {{ isCustomRatio ? 'selected' : '' }}>Custom...</option>
            </select>
        </div>
        <div class="field-row custom-ratio-row" style="{{ isCustomRatio ? '' : 'display:none' }}">
            <label>Custom Ratio (width:height)</label>
            <input type="text" name="{{ custom_ratio_name }}"
                value="{{ isCustomRatio ? currentRatio : '' }}"
                placeholder="e.g., 5:4 or 1200:630"
                pattern="[0-9]+:[0-9]+"
                title="Format: width:height (e.g., 5:4)">
        </div>
        <div class="field-row">
            <label>Srcset Sizes (comma-separated widths)</label>
            <input type="text" name="{{ srcset_name }}"
                value="{{ (image_config.srcset_sizes ?? [400, 800, 1200, 1600])|join(', ') }}"
                placeholder="400, 800, 1200, 1600">
            <small>Generated responsive image widths in pixels</small>
        </div>
    </div>
</div>
