{# field_advanced.html — Advanced field settings panel (included per existing field) #}
<div class="field-adv-section" data-section="basic">
    <div class="field-adv-section-title">Basic</div>
    <div class="field-advanced-grid">
        <div class="field-adv-group">
            <label>Placeholder</label>
            <input type="text" data-field-placeholder value="{{ field.placeholder or '' }}" placeholder="Hint text...">
        </div>
        <div class="field-adv-group">
            <label>Default Value</label>
            <input type="text" data-field-default value="{{ field.default or '' }}" placeholder="Default value...">
        </div>
        <div class="field-adv-group full-width" data-options-only>
            <label>Options (comma-separated)</label>
            <input type="text" data-field-options value="{{ field.options | join(', ') if field.options else '' }}" placeholder="Option 1, Option 2, Option 3">
            <div class="field-adv-hint">For select/radio field types.</div>
        </div>
    </div>
</div>
<div class="field-adv-section" data-section="validation">
    <div class="field-adv-section-title">Validation</div>
    <div class="field-advanced-grid">
        <div class="field-adv-group" data-num-only>
            <label>Min Value</label>
            <input type="number" data-field-min step="any" value="{{ field.min if field.min is defined else '' }}">
        </div>
        <div class="field-adv-group" data-num-only>
            <label>Max Value</label>
            <input type="number" data-field-max step="any" value="{{ field.max if field.max is defined else '' }}">
        </div>
        <div class="field-adv-group" data-len-only>
            <label>Min Length</label>
            <input type="number" data-field-min-length min="0" step="1" value="{{ field.minLength if field.minLength is defined else '' }}">
        </div>
        <div class="field-adv-group" data-len-only>
            <label>Max Length</label>
            <input type="number" data-field-max-length min="0" step="1" value="{{ field.maxLength if field.maxLength is defined else '' }}">
        </div>
        <div class="field-adv-group full-width" data-pattern-only>
            <label>Pattern (Regex)</label>
            <input type="text" data-field-pattern value="{{ field.pattern or '' }}" placeholder="^[A-Z]{2}\d{4}$">
            <div class="field-adv-hint">JavaScript regex pattern for custom validation.</div>
        </div>
        <div class="field-adv-group full-width">
            <label>Error Message</label>
            <input type="text" data-field-error-message value="{{ field.errorMessage or '' }}" placeholder="Custom error message...">
        </div>
    </div>
</div>
<div class="field-adv-section" data-section="condition">
    <div class="field-adv-section-title">Conditional Visibility</div>
    <div class="field-advanced-grid">
        <div class="field-adv-group">
            <label>Depends On (Field Key)</label>
            <input type="text" data-cond-field value="{{ field.condition.field if field.condition else '' }}" placeholder="e.g. service_type">
        </div>
        <div class="field-adv-group">
            <label>Operator</label>
            <select data-cond-operator>
                <option value="">—{% if not field.condition %} selected{% endif %}</option>
                <option value="eq"{% if field.condition and field.condition.operator == 'eq' %} selected{% endif %}>Equals</option>
                <option value="neq"{% if field.condition and field.condition.operator == 'neq' %} selected{% endif %}>Not Equals</option>
                <option value="contains"{% if field.condition and field.condition.operator == 'contains' %} selected{% endif %}>Contains</option>
                <option value="not_contains"{% if field.condition and field.condition.operator == 'not_contains' %} selected{% endif %}>Not Contains</option>
                <option value="gt"{% if field.condition and field.condition.operator == 'gt' %} selected{% endif %}>Greater Than</option>
                <option value="lt"{% if field.condition and field.condition.operator == 'lt' %} selected{% endif %}>Less Than</option>
                <option value="gte"{% if field.condition and field.condition.operator == 'gte' %} selected{% endif %}>Greater or Equal</option>
                <option value="lte"{% if field.condition and field.condition.operator == 'lte' %} selected{% endif %}>Less or Equal</option>
                <option value="in"{% if field.condition and field.condition.operator == 'in' %} selected{% endif %}>In List</option>
                <option value="not_in"{% if field.condition and field.condition.operator == 'not_in' %} selected{% endif %}>Not In List</option>
                <option value="filled"{% if field.condition and field.condition.operator == 'filled' %} selected{% endif %}>Is Filled</option>
                <option value="empty"{% if field.condition and field.condition.operator == 'empty' %} selected{% endif %}>Is Empty</option>
            </select>
        </div>
        <div class="field-adv-group full-width">
            <label>Compare Value</label>
            <input type="text" data-cond-value value="{{ field.condition.value if field.condition else '' }}" placeholder="Value to compare against">
            <div class="field-adv-hint">For "in"/"not_in": comma-separated list. For "filled"/"empty": leave blank.</div>
        </div>
    </div>
</div>
<div class="field-adv-section" data-section="calculation">
    <div class="field-adv-section-title">Calculation (Computed Fields)</div>
    <div class="field-advanced-grid">
        <div class="field-adv-group full-width">
            <label>Formula</label>
{% raw %}
            <input type="text" data-calc-formula value="{{ field.calculation.formula if field.calculation else '' }}" placeholder="{{quantity}} * {{unit_price}}">
            <div class="field-adv-hint">Use {{field_key}} for field references. Supports +, -, *, /, %, parentheses.</div>
{% endraw %}
        </div>
        <div class="field-adv-group">
            <label>Round To (Decimal Places)</label>
            <input type="number" data-calc-round min="0" max="10" step="1" value="{{ field.calculation.round if field.calculation and field.calculation.round is defined else '' }}">
        </div>
    </div>
</div>
<div class="field-adv-section" data-section="step">
    <div class="field-adv-section-title">Multi-Step</div>
    <div class="field-adv-group">
        <label>Step Number</label>
        <input type="number" data-field-step min="1" step="1" value="{{ field.step if field.step is defined else '' }}" placeholder="1">
        <div class="field-adv-hint">Leave blank for default (Step 1). Group fields by step number for multi-step forms.</div>
    </div>
</div>