{% extends "base.html" %}
{% block title %}Recept szerkesztése — Recept Importáló{% endblock %}

{% block head %}
<style>
    /* Wider layout for edit page */
    .container { max-width: 1100px; }

    .section-divider { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
    .ingredient-header {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.3rem;
        padding-right: 34px;
    }
    .ingredient-header span {
        font-size: 0.8rem;
        color: var(--text-dim);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .ingredient-header .col-qty { width: 60px; flex-shrink: 0; }
    .ingredient-header .col-unit { width: 80px; flex-shrink: 0; }
    .ingredient-header .col-food { flex: 1; }
    .ingredient-header .col-extra { width: 120px; flex-shrink: 0; }

    .ingredient-row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0.4rem;
    }
    .ingredient-row input { margin-bottom: 0; }
    .ingredient-row .ing-qty { width: 60px; flex-shrink: 0; }
    .ingredient-row .ing-unit { width: 80px; flex-shrink: 0; }
    .ingredient-row .ing-food { flex: 1; }
    .ingredient-row .ing-extra { width: 120px; flex-shrink: 0; }
    .ingredient-row button, .ingredient-group button {
        background: var(--danger);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
    }
    .ingredient-group {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin: 0.8rem 0 0.3rem;
    }
    .ingredient-group input {
        margin-bottom: 0;
        flex: 1;
        font-weight: 600;
        color: var(--accent);
        border-style: dashed;
    }
    .instruction-row {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }
    .instruction-row .step-num {
        background: var(--accent);
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0.4rem;
    }
    .instruction-row textarea { margin-bottom: 0; flex: 1; min-height: 120px; overflow: hidden; }
    .instruction-row button {
        background: var(--danger);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 0.4rem;
    }
    .add-btn {
        background: var(--surface2);
        border: 1px dashed var(--border);
        color: var(--text-dim);
        padding: 0.4rem 0.8rem;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: border-color 0.15s;
    }
    .add-btn:hover { border-color: var(--accent); color: var(--text); }

    /* Tags */
    .tag-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-height: 28px;
    }
    .tag-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        font-size: 0.85rem;
        line-height: 1.2;
        cursor: pointer;
        transition: opacity 0.15s;
        user-select: none;
    }
    .tag-chip:hover { opacity: 0.8; }
    .tag-chip.tag-active {
        background: var(--success);
        color: #fff;
    }
    .tag-chip.tag-inactive {
        background: var(--surface2);
        color: var(--text-dim);
        border: 1px solid var(--border);
    }
    .tag-search-wrap {
        position: relative;
        margin-top: 0.5rem;
    }
    .tag-search-wrap input {
        margin-bottom: 0;
        width: 100%;
    }
    .tag-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
        display: none;
    }
    .tag-dropdown.open { display: block; }
    .tag-dropdown-item {
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
    }
    .tag-dropdown-item:hover { background: var(--surface); }
    .tag-dropdown-item.tag-add-new { color: var(--accent); font-style: italic; }

    /* Top bar */
    .edit-top-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .edit-top-bar h2 { margin-bottom: 0; flex: 1; }

    /* Image section */
    .image-section {
        margin-top: 0.5rem;
    }
    .image-preview-wrap {
        text-align: center;
    }
    .image-preview {
        max-width: 350px;
        max-height: 250px;
        border-radius: var(--radius);
        object-fit: cover;
        border: 1px solid var(--border);
        display: block;
        margin: 0 auto;
    }
    .image-controls {
        margin-top: 0.75rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: flex-end;
    }
    .image-controls .url-input-group {
        flex: 1;
        min-width: 200px;
    }
    .image-controls .url-input-group input {
        margin-bottom: 0;
    }
    .image-controls .url-input-group label {
        font-size: 0.8rem;
    }
    .file-upload-label {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.6rem 1rem;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text-dim);
        cursor: pointer;
        font-size: 0.9rem;
        transition: border-color 0.15s, color 0.15s;
    }
    .file-upload-label:hover {
        border-color: var(--accent);
        color: var(--text);
    }
    .image-upload-status {
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

    /* Loading */
    .loading-wrap {
        text-align: center;
        padding: 3rem;
        color: var(--text-dim);
    }

    /* Toast */
    .toast {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.2rem;
        border-radius: var(--radius);
        color: #fff;
        font-weight: 500;
        font-size: 0.9rem;
        z-index: 2000;
        animation: toastIn 0.3s;
    }
    .toast-success { background: var(--success); }
    .toast-error { background: var(--danger); }
    @keyframes toastIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
{% endblock %}

{% block content %}
<div class="card" id="loadingCard">
    <div class="loading-wrap">
        <span class="spinner"></span> Recept betöltése...
    </div>
</div>

<div class="card hidden" id="editCard">
    <div class="edit-top-bar">
        <h2>Recept szerkesztése</h2>
        <a href="/recipes" class="btn btn-secondary">&#8592; Vissza</a>
    </div>

    <label for="recipeTitle">Név</label>
    <input type="text" id="recipeTitle">

    <label for="recipeDesc">Leírás</label>
    <textarea id="recipeDesc" rows="2"></textarea>

    <!-- Image section -->
    <div class="image-section">
        <label>Kép</label>
        <div class="image-preview-wrap">
            <img id="recipeImage" class="image-preview" src="" alt="" style="display:none;">
            <div id="noImageText" class="text-dim" style="display:none; font-size:0.9rem;">Nincs kép</div>
        </div>
        <div class="image-controls">
            <div class="url-input-group">
                <label for="imageUrlInput">Kép URL</label>
                <input type="url" id="imageUrlInput" placeholder="https://...">
            </div>
            <button class="btn btn-secondary" onclick="setImageFromUrl()" id="setUrlBtn" style="margin-bottom:0;">Beállítás</button>
            <label class="file-upload-label" style="margin-bottom:0;">
                &#128247; Fájl feltöltése
                <input type="file" id="imageFileInput" accept="image/*" onchange="uploadImageFile()" style="display:none;">
            </label>
        </div>
        <div id="imageUploadStatus" class="image-upload-status"></div>
    </div>

    <hr class="section-divider">

    <!-- Ingredients -->
    <label>Hozzávalók</label>
    <div class="ingredient-header">
        <span class="col-qty">Menny.</span>
        <span class="col-unit">Egység</span>
        <span class="col-food">Hozzávaló</span>
        <span class="col-extra">Megjegyzés</span>
    </div>
    <div id="ingredientsList"></div>
    <div class="flex gap-1 mt-1 mb-2">
        <button class="add-btn" onclick="addIngredient({})">+ Hozzávaló</button>
        <button class="add-btn" onclick="addIngredientGroup('')">+ Csoport</button>
    </div>

    <hr class="section-divider">

    <!-- Instructions -->
    <label>Elkészítés</label>
    <div id="instructionsList"></div>
    <button class="add-btn mt-1 mb-2" onclick="addInstruction('')">+ Lépés hozzáadása</button>

    <hr class="section-divider">

    <!-- Tags -->
    <label>Címkék</label>
    <div id="tagsActive" class="tag-chips mb-1"></div>
    <div class="tag-search-wrap">
        <input type="text" id="tagSearch" placeholder="Címke keresése / hozzáadása..."
               autocomplete="off" oninput="onTagSearch()" onfocus="onTagSearch()" onkeydown="onTagKeydown(event)">
        <div id="tagDropdown" class="tag-dropdown"></div>
    </div>

    <hr class="section-divider">

    <!-- Actions -->
    <div class="flex mt-2">
        <button class="btn btn-primary" id="saveBtn" onclick="saveRecipe()">Mentés</button>
        <a href="/recipes" class="btn btn-secondary">Mégsem</a>
        <button class="btn btn-danger" onclick="confirmDelete()" style="margin-left:auto;">Recept törlése</button>
        <span id="saveStatus"></span>
    </div>
</div>

<!-- Delete confirmation modal -->
<div id="deleteModal" style="position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;display:none;align-items:center;justify-content:center;">
    <div class="card" style="max-width:450px;width:90%;">
        <h2 style="color:#f85149;margin-bottom:1rem;">Recept törlése</h2>
        <p id="deleteModalText">Biztosan törölni szeretnéd ezt a receptet? Ez a művelet nem vonható vissza!</p>
        <div class="flex" style="justify-content:flex-end;gap:0.5rem;margin-top:1rem;">
            <button class="btn btn-secondary" onclick="closeDeleteModal()">Mégsem</button>
            <button class="btn btn-danger" onclick="executeDelete()" id="confirmDeleteBtn">Törlés</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const BACKEND = '{{ backend }}';
const RECIPE_ID = '{{ recipe_id }}';
let currentRecipe = null;
let existingTags = [];  // [{name, id}, ...]

/* ===== Escaping ===== */
function escHtml(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}

/* ===== Load recipe ===== */
async function loadRecipe() {
    try {
        const resp = await fetch('/api/recipes/' + BACKEND + '/' + encodeURIComponent(RECIPE_ID));
        const data = await resp.json();
        document.getElementById('loadingCard').classList.add('hidden');

        if (!data.ok) {
            document.getElementById('loadingCard').classList.remove('hidden');
            document.getElementById('loadingCard').innerHTML =
                '<div class="alert alert-danger">Hiba: ' + escHtml(data.error) + '</div>';
            return;
        }

        currentRecipe = data.recipe;
        document.getElementById('editCard').classList.remove('hidden');
        populateForm(currentRecipe);
    } catch (e) {
        document.getElementById('loadingCard').innerHTML =
            '<div class="alert alert-danger">Hiba: ' + escHtml(e.message) + '</div>';
    }
}

function populateForm(r) {
    document.getElementById('recipeTitle').value = r.title || '';
    document.getElementById('recipeDesc').value = r.description || '';

    // Image
    const img = document.getElementById('recipeImage');
    const noImg = document.getElementById('noImageText');
    if (r.image_url) {
        img.src = r.image_url;
        img.style.display = 'block';
        noImg.style.display = 'none';
        document.getElementById('imageUrlInput').value = r.image_url;
    } else {
        img.style.display = 'none';
        noImg.style.display = 'block';
    }

    // Ingredients
    document.getElementById('ingredientsList').innerHTML = '';
    (r.ingredients || []).forEach(i => addIngredient(i));

    // Instructions
    document.getElementById('instructionsList').innerHTML = '';
    (r.instructions || []).forEach(t => addInstruction(t));

    // Tags — existing tags go to active
    document.getElementById('tagsActive').innerHTML = '';
    (r.tags || []).forEach(t => addTagChip(t, true));
}

/* ===== Ingredients ===== */
function addIngredient(item) {
    if (typeof item === 'string') item = { food: item };
    if (item.group !== undefined && item.food === undefined) {
        addIngredientGroup(item.group);
        return;
    }
    const list = document.getElementById('ingredientsList');
    const row = document.createElement('div');
    row.className = 'ingredient-row';
    row.innerHTML = '<input type="text" class="ing-qty" placeholder="" value="' + escHtml(item.quantity || '') + '">'
        + '<input type="text" class="ing-unit" placeholder="" value="' + escHtml(item.unit || '') + '">'
        + '<input type="text" class="ing-food" placeholder="Hozzávaló" value="' + escHtml(item.food || '') + '">'
        + '<input type="text" class="ing-extra" placeholder="" value="' + escHtml(item.extra || '') + '">'
        + '<button onclick="this.parentElement.remove()">&#10005;</button>';
    list.appendChild(row);
}

function addIngredientGroup(name) {
    const list = document.getElementById('ingredientsList');
    const row = document.createElement('div');
    row.className = 'ingredient-group';
    row.innerHTML = '<input type="text" class="ing-group-name" placeholder="Csoport neve" value="' + escHtml(name || '') + '">'
        + '<button onclick="this.parentElement.remove()">&#10005;</button>';
    list.appendChild(row);
}

/* ===== Auto-resize textarea ===== */
function autoResize(ta) {
    ta.style.height = 'auto';
    const h = Math.max(120, ta.scrollHeight);
    ta.style.height = h + 'px';
}

/* ===== Instructions ===== */
function addInstruction(value) {
    const list = document.getElementById('instructionsList');
    const idx = list.children.length + 1;
    const row = document.createElement('div');
    row.className = 'instruction-row';
    row.innerHTML = '<span class="step-num">' + idx + '</span>'
        + '<textarea>' + escHtml(value) + '</textarea>'
        + '<button onclick="removeInstruction(this)">&#10005;</button>';
    list.appendChild(row);
    const ta = row.querySelector('textarea');
    ta.addEventListener('input', function() { autoResize(this); });
    // Auto-resize after content is set
    setTimeout(() => autoResize(ta), 0);
}

function removeInstruction(btn) {
    btn.closest('.instruction-row').remove();
    renumberInstructions();
}

function renumberInstructions() {
    document.querySelectorAll('#instructionsList .step-num').forEach((el, i) => {
        el.textContent = i + 1;
    });
}

/* ===== Tags ===== */
async function loadExistingTags() {
    try {
        const r = await fetch('/api/tags/' + BACKEND);
        const d = await r.json();
        if (d.ok) existingTags = d.tags || [];
    } catch (e) { /* ignore */ }
}

function addTagChip(name, active) {
    name = name.trim();
    if (!name) return;
    if (tagExistsIn(name, 'tagsActive')) return;
    const chip = document.createElement('span');
    chip.dataset.tag = name;
    chip.textContent = name;
    chip.className = 'tag-chip tag-active';
    chip.onclick = function() { this.remove(); };
    document.getElementById('tagsActive').appendChild(chip);
}

function tagExistsIn(name, containerId) {
    const lc = name.toLowerCase();
    const chips = document.querySelectorAll('#' + containerId + ' .tag-chip');
    for (const c of chips) {
        if (c.dataset.tag.toLowerCase() === lc) return true;
    }
    return false;
}

function getAllTagNames() {
    const names = [];
    document.querySelectorAll('#tagsActive .tag-chip').forEach(c => {
        names.push(c.dataset.tag.toLowerCase());
    });
    return names;
}

function onTagSearch() {
    const input = document.getElementById('tagSearch');
    const dropdown = document.getElementById('tagDropdown');
    const q = input.value.trim().toLowerCase();
    if (!q) { dropdown.classList.remove('open'); return; }

    const allNames = getAllTagNames();
    const matches = existingTags
        .filter(t => t.name.toLowerCase().includes(q) && !allNames.includes(t.name.toLowerCase()))
        .slice(0, 10);

    let html = '';
    for (const m of matches) {
        html += '<div class="tag-dropdown-item" onclick="selectTag(\'' +
            escHtml(m.name).replace(/'/g, "\\'") + '\')">' +
            escHtml(m.name) + '</div>';
    }

    // Option to add new custom tag
    const exactExists = matches.some(m => m.name.toLowerCase() === q) || allNames.includes(q);
    if (!exactExists && q) {
        html += '<div class="tag-dropdown-item tag-add-new" onclick="selectTag(\'' +
            escHtml(input.value.trim()).replace(/'/g, "\\'") + '\')">+ &quot;' +
            escHtml(input.value.trim()) + '&quot; hozzáadása</div>';
    }

    dropdown.innerHTML = html;
    dropdown.classList.toggle('open', html.length > 0);
}

function selectTag(name) {
    addTagChip(name, true);
    document.getElementById('tagSearch').value = '';
    document.getElementById('tagDropdown').classList.remove('open');
    document.getElementById('tagSearch').focus();
}

function onTagKeydown(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const val = e.target.value.trim();
        if (val) {
            addTagChip(val, true);
            e.target.value = '';
            document.getElementById('tagDropdown').classList.remove('open');
        }
    } else if (e.key === 'Escape') {
        document.getElementById('tagDropdown').classList.remove('open');
    }
}

/* Close dropdown on outside click */
document.addEventListener('click', e => {
    const wrap = document.querySelector('.tag-search-wrap');
    if (wrap && !wrap.contains(e.target)) {
        document.getElementById('tagDropdown').classList.remove('open');
    }
});

/* ===== Image ===== */
function setImageFromUrl() {
    const url = document.getElementById('imageUrlInput').value.trim();
    if (!url) return;
    const img = document.getElementById('recipeImage');
    const noImg = document.getElementById('noImageText');
    img.src = url;
    img.style.display = 'block';
    noImg.style.display = 'none';
    if (currentRecipe) currentRecipe.image_url = url;
    showToast('Kép URL beállítva. Mentsd a receptet a véglegesítéshez.', 'success');
}

async function uploadImageFile() {
    const fileInput = document.getElementById('imageFileInput');
    const file = fileInput.files[0];
    if (!file) return;

    const status = document.getElementById('imageUploadStatus');
    status.innerHTML = '<span class="spinner"></span> Feltöltés...';

    const formData = new FormData();
    formData.append('image', file);

    try {
        const resp = await fetch('/api/recipes/' + BACKEND + '/' + encodeURIComponent(RECIPE_ID) + '/image', {
            method: 'POST',
            body: formData,
        });
        const data = await resp.json();
        if (data.ok) {
            status.innerHTML = '<span class="text-success">&#10003; Kép feltöltve</span>';
            // Reload recipe to get new image URL
            const r2 = await fetch('/api/recipes/' + BACKEND + '/' + encodeURIComponent(RECIPE_ID));
            const d2 = await r2.json();
            if (d2.ok && d2.recipe.image_url) {
                const img = document.getElementById('recipeImage');
                img.src = d2.recipe.image_url + '?t=' + Date.now();
                img.style.display = 'block';
                document.getElementById('noImageText').style.display = 'none';
                document.getElementById('imageUrlInput').value = d2.recipe.image_url;
                if (currentRecipe) currentRecipe.image_url = d2.recipe.image_url;
            }
            showToast('Kép sikeresen feltöltve.', 'success');
        } else {
            status.innerHTML = '<span class="text-danger">Hiba: ' + escHtml(data.error) + '</span>';
        }
    } catch (e) {
        status.innerHTML = '<span class="text-danger">Hiba: ' + escHtml(e.message) + '</span>';
    }
    fileInput.value = '';
}

/* ===== Gather form data ===== */
function gatherRecipe() {
    const ingredients = [];
    document.querySelectorAll('#ingredientsList > div').forEach(el => {
        if (el.classList.contains('ingredient-group')) {
            const name = el.querySelector('.ing-group-name').value.trim();
            if (name) ingredients.push({ group: name });
        } else if (el.classList.contains('ingredient-row')) {
            const qty = el.querySelector('.ing-qty').value.trim();
            const unit = el.querySelector('.ing-unit').value.trim();
            const food = el.querySelector('.ing-food').value.trim();
            const extra = el.querySelector('.ing-extra').value.trim();
            if (food || qty) {
                ingredients.push({ quantity: qty, unit: unit, food: food, extra: extra });
            }
        }
    });

    const instructions = [];
    document.querySelectorAll('#instructionsList .instruction-row textarea').forEach(ta => {
        const v = ta.value.trim();
        if (v) instructions.push(v);
    });

    const tags = [];
    document.querySelectorAll('#tagsActive .tag-chip').forEach(el => {
        tags.push(el.dataset.tag);
    });

    return {
        title: document.getElementById('recipeTitle').value.trim(),
        description: document.getElementById('recipeDesc').value.trim(),
        image_url: document.getElementById('imageUrlInput').value.trim() || (currentRecipe ? currentRecipe.image_url : ''),
        ingredients: ingredients,
        instructions: instructions,
        tags: tags,
        original_url: currentRecipe ? currentRecipe.original_url : '',
    };
}

/* ===== Save ===== */
async function saveRecipe() {
    const recipe = gatherRecipe();
    if (!recipe.title) { alert('A recept neve kötelező!'); return; }

    const btn = document.getElementById('saveBtn');
    const status = document.getElementById('saveStatus');
    btn.disabled = true;
    status.innerHTML = '<span class="spinner"></span> Mentés...';

    try {
        const resp = await fetch('/api/recipes/' + BACKEND + '/' + encodeURIComponent(RECIPE_ID), {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(recipe),
        });
        const data = await resp.json();

        if (!data.ok) {
            status.innerHTML = '<span class="text-danger">Hiba: ' + escHtml(data.error) + '</span>';
            btn.disabled = false;
            return;
        }

        status.innerHTML = '<span class="text-success">&#10003; Mentve</span>';
        showToast('Recept sikeresen mentve.', 'success');
        btn.disabled = false;
    } catch (e) {
        status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + escHtml(e.message) + '</span>';
        btn.disabled = false;
    }
}

/* ===== Delete ===== */
function confirmDelete() {
    const title = document.getElementById('recipeTitle').value.trim() || 'ezt a receptet';
    document.getElementById('deleteModalText').textContent =
        'Biztosan törölni szeretnéd a következő receptet: „' + title + '"? Ez a művelet nem vonható vissza!';
    document.getElementById('deleteModal').style.display = 'flex';
}

function closeDeleteModal() {
    document.getElementById('deleteModal').style.display = 'none';
}

async function executeDelete() {
    const btn = document.getElementById('confirmDeleteBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> Törlés...';

    try {
        const resp = await fetch('/api/recipes/' + BACKEND + '/delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ids: [RECIPE_ID] }),
        });
        const data = await resp.json();
        if (data.ok) {
            window.location.href = '/recipes';
        } else {
            closeDeleteModal();
            btn.disabled = false;
            btn.textContent = 'Törlés';
            showToast(data.error || 'Hiba történt.', 'error');
        }
    } catch (e) {
        closeDeleteModal();
        btn.disabled = false;
        btn.textContent = 'Törlés';
        showToast('Hiba: ' + e.message, 'error');
    }
}

/* ===== Toast ===== */
function showToast(msg, type) {
    const el = document.createElement('div');
    el.className = 'toast toast-' + type;
    el.textContent = msg;
    document.body.appendChild(el);
    setTimeout(() => el.remove(), 3000);
}

/* ===== Init ===== */
loadExistingTags();
loadRecipe();
</script>
{% endblock %}