{# 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>