{#each instructions as group, groupIndex}

{#if group.type === 'reference'} 🔗 Base Recipe Reference {#if group.labelOverride !== undefined} updateLabelOverride(groupIndex, e)} placeholder="Label override (optional)" /> {/if} {#if group.stepsBefore && group.stepsBefore.length > 0}

Steps Before Base Recipe:

{#each group.stepsBefore as step, stepIndex}

{stepIndex + 1}

updateStepBefore(groupIndex, stepIndex, e)}
									placeholder="Step description"
								/>
							</div>
						{/each}
					</div>
				{/if}

{#if group.stepsAfter && group.stepsAfter.length > 0}
					<div class="reference-section">
						<div class="reference-section-label">Steps After Base Recipe:</div>
						{#each group.stepsAfter as step, stepIndex}
							<div class="step-item">
								<div class="step-number">{stepIndex + 1}</div>
								<textarea
									class:retranslated={isStepTranslated(groupIndex, stepIndex)}
									value={step || ''}
									on:input={(e) => updateStepAfter(groupIndex, stepIndex, e)}
									placeholder="Step description"
								/>
							</div>
						{/each}
					</div>
				{/if}
			{:else}
				<input
					type="text"
					class="group-name"
					class:retranslated={isGroupNameTranslated(groupIndex)}
					value={group.name || ''}
					on:input={(e) => updateInstructionGroupName(groupIndex, e)}
					placeholder="Instruction section name"
				/>
				{#each group.steps as step, stepIndex}
					<div class="step-item">
						<div class="step-number">{stepIndex + 1}</div>
						<textarea
							class:retranslated={isStepTranslated(groupIndex, stepIndex)}
							value={step || ''}
							on:input={(e) => updateStep(groupIndex, stepIndex, e)}
							placeholder="Step description"
						/>
					</div>
				{/each}
			{/if}
		</div>
	{/each}
</div>