<script lang='ts'>

import Pen from '$lib/assets/icons/Pen.svelte'
import Cross from '$lib/assets/icons/Cross.svelte'
import Plus from '$lib/assets/icons/Plus.svelte'
import Check from '$lib/assets/icons/Check.svelte'

import '$lib/css/nordtheme.css'
import "$lib/css/action_button.css"

import { do_on_key } from '$lib/components/do_on_key.js'
import BaseRecipeSelector from '$lib/components/BaseRecipeSelector.svelte'

let { lang = 'de' as 'de' | 'en', instructions = $bindable(), add_info = $bindable() } = $props<{ lang?: 'de' | 'en', instructions: any, add_info: any }>();

// Translation strings
const t = {
	de: {
		preparation: 'Vorbereitung:',
		bulkFermentation: 'Stockgare:',
		finalFermentation: 'Stückgare:',
		baking: 'Backen:',
		cooking: 'Kochen:',
		totalTime: 'Auf dem Teller:',
		instructions: 'Zubereitung',
		baseRecipe: 'Basisrezept',
		unnamed: 'Unbenannt',
		additionalStepsBefore: 'Zusätzliche Schritte davor:',
		additionalStepsAfter: 'Zusätzliche Schritte danach:',
		addStepBefore: 'Schritt davor hinzufügen',
		addStepAfter: 'Schritt danach hinzufügen',
		baseRecipeContent: '→ Inhalt vom Basisrezept wird hier eingefügt ←',
		insertBaseRecipe: 'Basisrezept einfügen',
		categoryOptional: 'Kategorie (optional)',
		subcategoryOptional: 'Unterkategorie (optional)',
		editStep: 'Schritt verändern',
		renameCategory: 'Kategorie umbenennen',
		confirmDeleteReference: 'Bist du dir sicher, dass du diese Referenz löschen möchtest?',
		confirmDeleteList: 'Bist du dir sicher, dass du diese Liste löschen möchtest? Alle Zubereitungsschritte der Liste werden hiermit auch gelöscht.',
		empty: 'Leer',
		editHeading: 'Überschrift bearbeiten',
		removeList: 'Liste entfernen',
		editStepAria: 'Schritt bearbeiten',
		removeStepAria: 'Schritt entfernen',
		moveUpAria: 'Nach oben verschieben',
		moveDownAria: 'Nach unten verschieben',
		moveReferenceUpAria: 'Referenz nach oben verschieben',
		moveReferenceDownAria: 'Referenz nach unten verschieben',
		removeReferenceAria: 'Referenz entfernen',
		moveListUpAria: 'Liste nach oben verschieben',
		moveListDownAria: 'Liste nach unten verschieben'
	},
	en: {
		preparation: 'Preparation:',
		bulkFermentation: 'Bulk Fermentation:',
		finalFermentation: 'Final Fermentation:',
		baking: 'Baking:',
		cooking: 'Cooking:',
		totalTime: 'Total Time:',
		instructions: 'Instructions',
		baseRecipe: 'Base Recipe',
		unnamed: 'Unnamed',
		additionalStepsBefore: 'Additional steps before:',
		additionalStepsAfter: 'Additional steps after:',
		addStepBefore: 'Add step before',
		addStepAfter: 'Add step after',
		baseRecipeContent: '→ Base recipe content will be inserted here ←',
		insertBaseRecipe: 'Insert Base Recipe',
		categoryOptional: 'Category (optional)',
		subcategoryOptional: 'Subcategory (optional)',
		editStep: 'Edit Step',
		renameCategory: 'Rename Category',
		confirmDeleteReference: 'Are you sure you want to delete this reference?',
		confirmDeleteList: 'Are you sure you want to delete this list? All preparation steps in the list will also be deleted.',
		empty: 'Empty',
		editHeading: 'Edit heading',
		removeList: 'Remove list',
		editStepAria: 'Edit step',
		removeStepAria: 'Remove step',
		moveUpAria: 'Move up',
		moveDownAria: 'Move down',
		moveReferenceUpAria: 'Move reference up',
		moveReferenceDownAria: 'Move reference down',
		removeReferenceAria: 'Remove reference',
		moveListUpAria: 'Move list up',
		moveListDownAria: 'Move list down'
	}
};

const step_placeholder = "Kartoffeln schälen..."

let new_step = $state({
	name: "",
	step: step_placeholder
	});

let edit_heading = $state({
	name:"",
	list_index: "",
	});

// Base recipe selector state
let showSelector = $state(false);
let insertPosition = $state(0);

// State for adding steps to references
let addingToReference = $state({
	active: false,
	list_index: -1,
	position: 'before' as 'before' | 'after',
	editing: false,
	step_index: -1
});

function openSelector(position: number) {
	insertPosition = position;
	showSelector = true;
}

function handleSelect(recipe: any, options: any) {
	const reference = {
		type: 'reference',
		name: options.labelOverride || (options.showLabel ? recipe.name : ''),
		baseRecipeRef: recipe._id,
		includeInstructions: options.includeInstructions,
		showLabel: options.showLabel,
		labelOverride: options.labelOverride || '',
		baseMultiplier: options.baseMultiplier || 1,
		stepsBefore: [],
		stepsAfter: []
	};

	instructions.splice(insertPosition, 0, reference);
	instructions = instructions;
	showSelector = false;
}

export function removeReference(list_index: number) {
	const confirmed = confirm(t[lang].confirmDeleteReference);
	if (confirmed) {
		instructions.splice(list_index, 1);
		instructions = instructions;
	}
}

// Functions to manage steps before/after base recipe in references
function addStepToReference(list_index: number, position: 'before' | 'after', step: string) {
	if (!instructions[list_index].stepsBefore) instructions[list_index].stepsBefore = [];
	if (!instructions[list_index].stepsAfter) instructions[list_index].stepsAfter = [];

	if (position === 'before') {
		instructions[list_index].stepsBefore.push(step);
	} else {
		instructions[list_index].stepsAfter.push(step);
	}
	instructions = instructions;
}

function removeStepFromReference(list_index: number, position: 'before' | 'after', step_index: number) {
	if (position === 'before') {
		instructions[list_index].stepsBefore.splice(step_index, 1);
	} else {
		instructions[list_index].stepsAfter.splice(step_index, 1);
	}
	instructions = instructions;
}

function editStepFromReference(list_index: number, position: 'before' | 'after', step_index: number) {
	const steps = position === 'before' ? instructions[list_index].stepsBefore : instructions[list_index].stepsAfter;
	const step = steps[step_index];

	// Set up edit state
	addingToReference = {
		active: true,
		list_index,
		position,
		editing: true,
		step_index
	};

	edit_step = {
		step: step || "",
		name: "",
		list_index: 0,
		step_index: 0,
	};

	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
	if (modal_el) {
		modal_el.showModal();
	}
}

function openAddToReferenceModal(list_index: number, position: 'before' | 'after') {
	addingToReference = {
		active: true,
		list_index,
		position,
		editing: false,
		step_index: -1
	};
	// Clear and open the edit step modal for adding
	edit_step = {
		step: "",
		name: "",
		list_index: 0,
		step_index: 0,
	};
	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
	if (modal_el) {
		modal_el.showModal();
	}
}

function get_sublist_index(sublist_name, list){
	for(var i =0; i < list.length; i++){
		if(list[i].name == sublist_name){
			return i
		}
	}
	return -1
}
export function remove_list(list_index){
	if(instructions[list_index].steps.length > 1){
		const response = confirm(t[lang].confirmDeleteList);
		if(!response){
			return
		}
	}
	instructions.splice(list_index, 1);
	instructions = instructions //tells svelte to update dom
}

export function add_new_step(){
	if(new_step.step == step_placeholder){
		return
	}
	let list_index = get_sublist_index(new_step.name, instructions)
	if(list_index == -1){
		instructions.push({
			name: new_step.name,
			steps: [ new_step.step ],
		})
		list_index = instructions.length - 1
	}
	else{
		instructions[list_index].steps.push(new_step.step)
	}
	const el = document.querySelector("#step")
	el.innerHTML = ""
	new_step.step = ""
	instructions = instructions //tells svelte to update dom
}

export function remove_step(list_index, step_index){
	instructions[list_index].steps.splice(step_index, 1)
	instructions = instructions //tells svelte to update dom
}

let edit_step = $state({
	name: "",
	step: "",
	list_index: 0,
	step_index: 0,
});
export function show_modal_edit_step(list_index, step_index){
	edit_step = {
		step: instructions[list_index].steps[step_index],
		name: instructions[list_index].name,
	}
	edit_step.list_index = list_index
	edit_step.step_index = step_index
	const modal_el = document.querySelector(`#edit_step_modal-${lang}`);
	modal_el.showModal();
}

export function edit_step_and_close_modal(){
	// Check if we're adding to or editing a reference
	if (addingToReference.active) {
		// Don't add empty steps
		if (!edit_step.step || edit_step.step.trim() === '') {
			addingToReference = {
				active: false,
				list_index: -1,
				position: 'before',
				editing: false,
				step_index: -1
			};
			const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
			if (modal_el) {
				setTimeout(() => modal_el.close(), 0);
			}
			return;
		}

		if (addingToReference.editing) {
			// Edit existing step in reference
			const steps = addingToReference.position === 'before'
				? instructions[addingToReference.list_index].stepsBefore
				: instructions[addingToReference.list_index].stepsAfter;
			steps[addingToReference.step_index] = edit_step.step;
			instructions = instructions;
		} else {
			// Add new step to reference
			addStepToReference(addingToReference.list_index, addingToReference.position, edit_step.step);
		}
		addingToReference = {
			active: false,
			list_index: -1,
			position: 'before',
			editing: false,
			step_index: -1
		};
	} else {
		// Normal edit behavior
		instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
	}
	const modal_el = document.querySelector(`#edit_step_modal-${lang}`) as HTMLDialogElement;
	if (modal_el) {
		// Defer closing to next tick to ensure all bindings are updated
		setTimeout(() => modal_el.close(), 0);
	}
}

export function show_modal_edit_subheading_step(list_index){
	edit_heading.name = instructions[list_index].name
	edit_heading.list_index = list_index
	const el = document.querySelector(`#edit_subheading_steps_modal-${lang}`)
	el.showModal()
}

export function edit_subheading_steps_and_close_modal(){
	instructions[edit_heading.list_index].name = edit_heading.name
	const modal_el = document.querySelector("#edit_subheading_steps_modal");
	modal_el.close();
}

function handleStepModalCancel() {
	// Reset reference adding state when modal is cancelled (Escape key)
	addingToReference = {
		active: false,
		list_index: -1,
		position: 'before',
		editing: false,
		step_index: -1
	};
}


export function clear_step(){
	const el = document.querySelector("#step")
	if(el.innerHTML == step_placeholder){
		el.innerHTML = ""
	}
}
export function add_placeholder(){
	const el = document.querySelector("#step")
	if(el.innerHTML == ""){
		el.innerHTML = step_placeholder
	}
}

export function update_list_position(list_index, direction){
	if(direction == 1){
		if(list_index == 0){
			return
		}
		instructions.splice(list_index - 1, 0, instructions.splice(list_index, 1)[0])
	}
	else if(direction == -1){
		if(list_index == instructions.length - 1){
			return
		}
		instructions.splice(list_index + 1, 0, instructions.splice(list_index, 1)[0])
	}
	instructions = instructions //tells svelte to update dom
}
export function update_step_position(list_index, step_index, direction){
	if(direction == 1){
		if(step_index == 0){
			return
		}
		instructions[list_index].steps.splice(step_index - 1, 0, instructions[list_index].steps.splice(step_index, 1)[0])
	}
	else if(direction == -1){
		if(step_index == instructions[list_index].steps.length - 1){
			return
		}
		instructions[list_index].steps.splice(step_index + 1, 0, instructions[list_index].steps.splice(step_index, 1)[0])
	}
	instructions = instructions //tells svelte to update dom
}
</script>

<style>
.move_buttons_container{
	display: inline-flex;
	flex-direction: column;
}
.move_buttons_container button{
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
	transition: 200ms;
}
.move_buttons_container button:hover{
	scale: 1.4;
}
.step_move_buttons{
	position: absolute;
	left: -2.5rem;
	flex-direction: column;
}
input::placeholder{
	all:unset;
}

li {
	position: relative;
}
li > div{
	display:flex;
	flex-direction: row;
	justify-items: space-between;
	align-items:center;
	user-select: none;
}
li > div > div:first-child{
	flex-grow: 1;
	cursor: pointer;
}
li > div > div:last-child{
	display: flex;
	flex-direction: row;
}
input.heading{
	box-sizing: border-box;
	background-color: var(--nord0);
	padding: 1rem;
	padding-inline: 2rem;
	font-size: 1.5rem;
	width: 100%;
	border-radius: 1000px;
	color: white;
	justify-content: center;
	align-items: center;
	transition: 200ms;
}
input.heading:hover,
input.heading:focus-visible
{
	background-color: var(--nord1);
}

.heading_wrapper{
	position: relative;
	width: min(300px, 95dvw);
	margin-inline: auto;
	transition: 200ms;
}
.heading_wrapper:hover,
.heading_wrapper:focus-visible
{
	transform:scale(1.1,1.1);
}

.heading_wrapper button{
	position: absolute;
	bottom: -1.5rem;
	right: -1.5rem;
}
.adder{
	margin-inline: auto;
	position: relative;
	margin-block: 3rem;
	width: 90%;
	border-radius: 20px;
	transition: 200ms;
	background-color: var(--blue);
	padding: 1.5rem 2rem;
}
dialog .adder{
	width: 400px;
}
.shadow{
	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
}
.adder button{
	position: absolute;
	right: -1.5rem;
	bottom: -1.5rem;
}
.category{
	position: absolute;
	border: none;
	--font_size: 1.5rem;
	top: -1em;
	left: -1em;
	font-family: sans-serif;
	font-size: 1.5rem;
	background-color: var(--nord0);
	color: var(--nord4);
	border-radius: 1000000px;
	width: 23ch;
	padding: 0.5em 1em;
	transition: 100ms;
	box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
}
.category:hover,
.category:focus-visible
{
	background-color: var(--nord1);
	transform: scale(1.05,1.05);
}
.adder:hover,
.adder:focus-within
{
	transform: scale(1.1, 1.1);
}

.add_step p{
	font-family: sans-serif;
	width: 100%;
	font-size: 1.2rem;
	border-radius: 20px;
	border: 2px solid var(--nord4);
	border-radius: 30px;
	padding: 0.5em 1em;
	color: var(--nord4);
	transition: 100ms;
}
.add_step p:hover,
.add_step p:focus-visible
{
	color: white;
	scale: 1.02 1.02;
}

dialog{
	box-sizing: content-box;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255, 0.001);
	border: unset;
	margin: 0;
	transition: 200ms;
}
dialog .adder{
	margin-top: 5rem;
}
dialog h2{
	font-size: 3rem;
	font-family: sans-serif;
	color: white;
	text-align: center;
	margin-top: 30vh;
	margin-top: 30dvh;
	filter: drop-shadow(0 0 0.4em black)
		drop-shadow(0 0 1em black)
		;
}
dialog .adder input::placeholder{
	font-size: 1.2rem;
}

@media screen and (max-width: 500px){
	dialog h2{
		margin-top: 2rem;
	}
	dialog .adder{
		width: 85%;
		padding-inline: 0.5em;
	}
	dialog .adder .category{
		width: 70%;
	}
}
dialog[open]::backdrop{
    animation: show 200ms ease forwards;
}
@keyframes show{
    from {
	backdrop-filter: blur(0px);
    }
    to {
	backdrop-filter: blur(10px);
    }
}
ol li::marker{
	font-weight: bold;
	color: var(--blue);
	font-size: 1.2rem;
}
.instructions{
	flex-basis: 0;
	flex-grow: 2;
	background-color: var(--nord5);
	padding-block: 1rem;
	padding-inline: 2rem;
}
.instructions ol{
	padding-left: 1em;
}
.instructions li{
	margin-block: 0.5em;
	font-size: 1.1rem;
}

.additional_info{
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
.additional_info > *{
	flex-grow: 0;
	overflow: hidden;
	padding: 1em;
	background-color: #FAFAFE;
	box-shadow: 0.3em 0.3em 1em 0.2em rgba(0,0,0,0.3);
	/*max-width: 30%*/
}
.additional_info > div > *:not(h4){
	line-height: 2em;
}
h4{
	line-height: 1em;
	margin-block: 0;
}
.button_subtle{
	padding: 0em;
	animation: unset;
	margin: 0.2em 0.1em;
	background-color: transparent;
	box-shadow: unset;
	display:inline;
}
.button_subtle:hover{
	scale: 1.2 1.2;
}
h3{
	display:flex;
	gap: 1rem;
	cursor: pointer;
	user-select: none;
}
.additional_info p[contenteditable]{
	display: inline;
	padding: 0.25em 1em;
	border: 2px solid grey;
	border-radius: 1000px;
}
.additional_info div:has(p[contenteditable]){
	transition: 200ms;
	display: inline;
}
.additional_info div:has(p[contenteditable]):hover,
.additional_info div:has(p[contenteditable]):focus-within
{
	transform: scale(1.1, 1.1);
}
@media screen and (max-width: 500px){
	dialog h2{
	margin-top: 2rem;
	}
	dialog .heading_wrapper{
		width: 80%;
	}
}
@media (prefers-color-scheme: dark){
	.additional_info div{
		background-color: var(--accent-dark);
	}
	.instructions{
		background-color: var(--nord6-dark);
	}
}
.button_arrow{
	fill: var(--nord1);
}
@media (prefers-color-scheme: dark){
	.button_arrow{
		fill: var(--nord4);
	}
}

/* Styling for converted div-to-button elements */
.subheading-button, .step-button {
	all: unset;
	cursor: pointer;
	user-select: none;
	display: block;
	width: 100%;
	text-align: left;
}

/* Base recipe reference styles */
.reference-container {
	margin-block: 1em;
	padding: 1em;
	background-color: var(--nord14);
	border-radius: 10px;
	border: 2px solid var(--nord9);
	box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}

.reference-header {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 0.5em;
}

.reference-badge {
	flex-grow: 1;
	font-weight: bold;
	color: var(--nord0);
	font-size: 1.1rem;
}

@media (prefers-color-scheme: dark) {
	.reference-container {
		background-color: var(--nord1);
	}
	.reference-badge {
		color: var(--nord6);
	}
}

.insert-base-recipe-button {
	margin-block: 1rem;
	padding: 1em 2em;
	font-size: 1.1rem;
	border-radius: 1000px;
	background-color: var(--nord9);
	color: white;
	border: none;
	cursor: pointer;
	transition: 200ms;
	box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}

.insert-base-recipe-button:hover {
	transform: scale(1.05, 1.05);
	box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
}

.add-to-reference-button {
	color: white;
}

.add-to-reference-button:hover {
	scale: 1.02 1.02 !important;
	transform: scale(1.02) !important;
}
</style>

<div class=instructions>
<div class=additional_info>

	<div><h4>{t[lang].preparation}</h4>
		<p contenteditable type="text" bind:innerText={add_info.preparation}></p>
	</div>


	<div><h4>{t[lang].bulkFermentation}</h4>
		<p contenteditable type="text" bind:innerText={add_info.fermentation.bulk}></p>
	</div>

	<div><h4>{t[lang].finalFermentation}</h4>
		<p contenteditable type="text" bind:innerText={add_info.fermentation.final}></p>
	</div>

	<div><h4>{t[lang].baking}</h4>
		<div><p type="text" bind:innerText={add_info.baking.length} contenteditable placeholder="40 min..."></p></div> bei <div><p type="text" bind:innerText={add_info.baking.temperature} contenteditable placeholder=200...></p></div> °C <div><p type="text" bind:innerText={add_info.baking.mode} contenteditable placeholder="Ober-/Unterhitze..."></p></div></div>

	<div><h4>{t[lang].cooking}</h4>
		<p contenteditable type="text" bind:innerText={add_info.cooking}></p>
	</div>

	<div><h4>{t[lang].totalTime}</h4>
		<p contenteditable type="text" bind:innerText={add_info.total_time}></p>
	</div>
</div>

<h2>{t[lang].instructions}</h2>
{#each instructions as list, list_index}
	{#if list.type === 'reference'}
		<!-- Reference item display -->
		<div class="reference-container">
			<div class="reference-header">
				<div class="move_buttons_container">
					<button type="button" onclick={() => update_list_position(list_index, 1)} aria-label={t[lang].moveReferenceUpAria}>
						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
					</button>
					<button type="button" onclick={() => update_list_position(list_index, -1)} aria-label={t[lang].moveReferenceDownAria}>
						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
					</button>
				</div>
				<div class="reference-badge">
					📋 {t[lang].baseRecipe}: {list.name || t[lang].unnamed}
					<div style="margin-top: 0.5em;">
						<label style="font-size: 0.9em; display: flex; align-items: center; gap: 0.5em;">
							{t[lang].baseMultiplier || 'Mengenfaktor'}:
							<input
								type="number"
								bind:value={list.baseMultiplier}
								min="0.1"
								step="0.1"
								style="width: 5em; padding: 0.25em 0.5em; border-radius: 5px; border: 1px solid var(--nord4);"
							/>
						</label>
					</div>
				</div>
				<div class="mod_icons">
					<button type="button" class="action_button button_subtle" onclick={() => removeReference(list_index)} aria-label={t[lang].removeReferenceAria}>
						<Cross fill="var(--nord11)"></Cross>
					</button>
				</div>
			</div>

			<!-- Steps before base recipe -->
			{#if list.stepsBefore && list.stepsBefore.length > 0}
				<h4 style="margin-block: 0.5em; color: var(--nord9);">{t[lang].additionalStepsBefore}</h4>
				<ol>
					{#each list.stepsBefore as step, step_index}
						<li>
							<div style="display: flex; align-items: center;">
								<div class="move_buttons_container step_move_buttons">
									<!-- Empty for consistency -->
								</div>
								<button type="button" onclick={() => editStepFromReference(list_index, 'before', step_index)} class="step-button" style="flex-grow: 1;">
									{@html step}
								</button>
								<div>
									<button type="button" class="action_button button_subtle" onclick={() => editStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].editStepAria}>
										<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
									</button>
									<button type="button" class="action_button button_subtle" onclick={() => removeStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].removeStepAria}>
										<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
									</button>
								</div>
							</div>
						</li>
					{/each}
				</ol>
			{/if}
			<button type="button" class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'before')}>
				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addStepBefore}
			</button>

			<!-- Base recipe content indicator -->
			<div style="text-align: center; padding: 0.5em; margin: 0.5em 0; font-style: italic; color: var(--nord10); background-color: rgba(143, 188, 187, 0.4); border-radius: 5px;">
				{t[lang].baseRecipeContent}
			</div>

			<!-- Steps after base recipe -->
			<button type="button" class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'after')}>
				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addStepAfter}
			</button>
			{#if list.stepsAfter && list.stepsAfter.length > 0}
				<h4 style="margin-block: 0.5em; color: var(--nord9);">{t[lang].additionalStepsAfter}</h4>
				<ol>
					{#each list.stepsAfter as step, step_index}
						<li>
							<div style="display: flex; align-items: center;">
								<div class="move_buttons_container step_move_buttons">
									<!-- Empty for consistency -->
								</div>
								<button type="button" onclick={() => editStepFromReference(list_index, 'after', step_index)} class="step-button" style="flex-grow: 1;">
									{@html step}
								</button>
								<div>
									<button type="button" class="action_button button_subtle" onclick={() => editStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].editStepAria}>
										<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
									</button>
									<button type="button" class="action_button button_subtle" onclick={() => removeStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].removeStepAria}>
										<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
									</button>
								</div>
							</div>
						</li>
					{/each}
				</ol>
			{/if}
		</div>
	{:else}
		<!-- svelte-ignore a11y_click_events_have_key_events -->
		<h3>
		<div class=move_buttons_container>
			<button type="button" onclick="{() => update_list_position(list_index, 1)}" aria-label={t[lang].moveListUpAria}>
							<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
					</button>
			<button type="button" onclick="{() => update_list_position(list_index, -1)}" aria-label={t[lang].moveListDownAria}>
							<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
			</button>
		</div>
		<button type="button" onclick={() => show_modal_edit_subheading_step(list_index)} class="subheading-button">
		{#if list.name}
			{list.name}
		{:else}
			{t[lang].empty}
		{/if}
		</button>
		<button type="button" class="action_button button_subtle" onclick="{() => show_modal_edit_subheading_step(list_index)}" aria-label={t[lang].editHeading}>
				<Pen fill=var(--nord1)></Pen>	</button>
			<button type="button" class="action_button button_subtle" onclick="{() => remove_list(list_index)}" aria-label={t[lang].removeList}>
					<Cross fill=var(--nord1)></Cross>
		</button>
	</h3>
	<ol>
	{#each list.steps as step, step_index}
	<!-- svelte-ignore a11y_click_events_have_key_events -->
		<li>
			<div class="move_buttons_container step_move_buttons">
				<button type="button" onclick="{() => update_step_position(list_index, step_index, 1)}" aria-label={t[lang].moveUpAria}>
		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
		                </button>
				<button type="button" onclick="{() => update_step_position(list_index, step_index, -1)}" aria-label={t[lang].moveDownAria}>
		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
				</button>
			</div>
			<div>
				<button type="button" onclick={() => show_modal_edit_step(list_index, step_index)} class="step-button">
					{@html step}
				</button>
			<div><button type="button" class="action_button button_subtle" onclick={() => show_modal_edit_step(list_index, step_index)} aria-label={t[lang].editStepAria}>
				<Pen fill=var(--nord1)></Pen>
		</button>
		<button type="button" class="action_button button_subtle" onclick="{() => remove_step(list_index, step_index)}" aria-label={t[lang].removeStepAria}>
			<Cross fill=var(--nord1)></Cross>
		</button>
			</div></div>
		</li>
	{/each}
	</ol>
	{/if}
{/each}

<!-- Button to insert base recipe -->
<button type="button" class="insert-base-recipe-button" onclick={() => openSelector(instructions.length)}>
	<Plus fill="white" style="display: inline; width: 1.5em; height: 1.5em; vertical-align: middle;"></Plus>
	{t[lang].insertBaseRecipe}
</button>
</div>

<div class='adder shadow'>
<input class=category type="text" bind:value={new_step.name} placeholder={t[lang].categoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false , add_new_step)} >
<div class=add_step>
	<p id=step contenteditable onfocus='{clear_step}' onblur={add_placeholder} bind:innerText={new_step.step} onkeydown={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p>
	<button type="button" onclick={() => add_new_step()} class=action_button>
		<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
	</button>

</div>
</div>
<dialog id="edit_step_modal-{lang}" oncancel={handleStepModalCancel}>
	<h2>{t[lang].editStep}</h2>
	<div class=adder>
	<input class=category type="text" bind:value={edit_step.name} placeholder={t[lang].subcategoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
	<div class=add_step>
		<p id=step contenteditable bind:innerText={edit_step.step} onkeydown={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
	<button type="button" class=action_button onclick="{() => edit_step_and_close_modal()}" >
		<Check fill=white style="height: 2rem; width: 2rem"></Check>
	</button>
</div>
	</div>
</dialog>

<dialog id="edit_subheading_steps_modal-{lang}">
	<h2>{t[lang].renameCategory}</h2>
	<div class=heading_wrapper>
		<input class="heading" type="text" bind:value={edit_heading.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
		<button type="button" onclick={edit_subheading_steps_and_close_modal} class=action_button>
		<Check fill=white style="height: 2rem; width: 2rem"></Check>
		</button>
	</div>
</dialog>

<!-- Base recipe selector -->
<BaseRecipeSelector
	type="instructions"
	onSelect={handleSelect}
	bind:open={showSelector}
/>
