feat: recipe management page — browse, search, edit, delete recipes

New /recipes page with backend switching (Mealie/Tandoor), full-text
search, tag filtering, multi-select bulk delete, per-recipe edit/delete
buttons, and a full recipe editor reusing the import preview form.

New API client methods: list_recipes, get_recipe, update_recipe,
delete_recipe for both MealieClient and TandoorClient.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v0.9.0 (2026-02-26)
+
+### Added
+- **Recipe management page** (`/recipes`): browse, search, filter, edit, and delete recipes from Mealie and Tandoor
+  - Backend switching tabs (Mealie / Tandoor) with only configured backends shown
+  - Full-text search with 300ms debounce
+  - Tag/keyword filtering with searchable dropdown
+  - Multi-select with bulk delete (confirmation dialog)
+  - Per-recipe edit and delete buttons
+  - Recipe edit page with the same form as the import preview (ingredients, instructions, tags)
+  - Pagination for large recipe collections
+- New API client methods: `list_recipes()`, `get_recipe()`, `update_recipe()`, `delete_recipe()` for both Mealie and Tandoor
+- New API endpoints: `GET /api/recipes/<backend>`, `GET/PUT /api/recipes/<backend>/<id>`, `POST /api/recipes/<backend>/delete`, `GET /api/tags/<backend>`
+
 ## v0.8.4 (2026-02-26)
 
 ### Added

README.md

@@ -4,7 +4,7 @@ Docker container for importing recipes from Hungarian websites into [Mealie](htt
 
 **Problem**: Mealie's and Tandoor's built-in URL import cannot parse ingredients and instructions from Hungarian recipe sites like mindmegette.hu.
 
-**Solution**: This container provides a web UI that scrapes Hungarian recipe pages with site-specific parsers, lets you review and edit the extracted data, then pushes it to Mealie and/or Tandoor via their REST APIs. Supports both single recipe import and bulk import of multiple URLs.
+**Solution**: This container provides a web UI that scrapes Hungarian recipe pages with site-specific parsers, lets you review and edit the extracted data, then pushes it to Mealie and/or Tandoor via their REST APIs. Supports single recipe import, bulk import, and recipe management (browse, search, edit, delete).
 
 ## Architecture
 
@@ -15,10 +15,12 @@ Docker container for importing recipes from Hungarian websites into [Mealie](htt
 │  Flask + Gunicorn                                    │
 │  ├── /settings       → Configure Mealie & Tandoor    │
 │  ├── /import         → Single or bulk import          │
+│  ├── /recipes        → Browse, search, edit, delete   │
 │  ├── /scrape         → AJAX: parse recipe HTML       │
 │  ├── /send           → AJAX: push to Mealie API      │
 │  ├── /send-tandoor   → AJAX: push to Tandoor API     │
 │  ├── /tags           → AJAX: list tags from both     │
+│  ├── /api/recipes/*  → AJAX: recipe CRUD endpoints   │
 │  └── /health         → Health check                  │
 │                                                      │
 │  Modules:                                            │

app/main.py

@@ -249,6 +249,166 @@ def send_to_tandoor():
         return jsonify({"ok": False, "error": str(exc), "trace": traceback.format_exc()})
 
 
+@app.route("/recipes")
+def recipes_page():
+    """Show the recipes management page."""
+    cfg = config.load()
+    has_mealie = bool(cfg.get("mealie_url") and cfg.get("mealie_api_key"))
+    has_tandoor = bool(cfg.get("tandoor_url") and cfg.get("tandoor_api_key"))
+    if not has_mealie and not has_tandoor:
+        flash("Először állíts be legalább egy szolgáltatást.", "warning")
+        return redirect(url_for("settings"))
+    return render_template("recipes.html", cfg=cfg, version=VERSION,
+                           has_mealie=has_mealie, has_tandoor=has_tandoor)
+
+
+@app.route("/recipes/<backend>/<path:recipe_id>/edit")
+def recipe_edit_page(backend, recipe_id):
+    """Show the recipe edit page."""
+    cfg = config.load()
+    has_mealie = bool(cfg.get("mealie_url") and cfg.get("mealie_api_key"))
+    has_tandoor = bool(cfg.get("tandoor_url") and cfg.get("tandoor_api_key"))
+    return render_template("recipe_edit.html", cfg=cfg, version=VERSION,
+                           backend=backend, recipe_id=recipe_id,
+                           has_mealie=has_mealie, has_tandoor=has_tandoor)
+
+
+@app.route("/api/recipes/<backend>")
+def api_list_recipes(backend):
+    """AJAX — list recipes from the given backend."""
+    cfg = config.load()
+    search = request.args.get("search", "").strip()
+    page = int(request.args.get("page", 1))
+    per_page = int(request.args.get("per_page", 50))
+    tag_ids_raw = request.args.get("tag_ids", "").strip()
+
+    try:
+        if backend == "mealie":
+            if not cfg.get("mealie_url") or not cfg.get("mealie_api_key"):
+                return jsonify({"ok": False, "error": "Mealie nincs beállítva."})
+            client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"],
+                                  api_url=config.MEALIE_INTERNAL_URL)
+            tag_ids = [t for t in tag_ids_raw.split(",") if t] if tag_ids_raw else None
+            result = client.list_recipes(search=search, tag_ids=tag_ids,
+                                         page=page, per_page=per_page)
+        elif backend == "tandoor":
+            if not cfg.get("tandoor_url") or not cfg.get("tandoor_api_key"):
+                return jsonify({"ok": False, "error": "Tandoor nincs beállítva."})
+            client = TandoorClient(cfg["tandoor_url"], cfg["tandoor_api_key"],
+                                    api_url=config.TANDOOR_INTERNAL_URL)
+            tag_ids = [int(t) for t in tag_ids_raw.split(",") if t] if tag_ids_raw else None
+            result = client.list_recipes(search=search, keyword_ids=tag_ids,
+                                          page=page, per_page=per_page)
+        else:
+            return jsonify({"ok": False, "error": "Ismeretlen backend."})
+        return jsonify({"ok": True, **result})
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)})
+
+
+@app.route("/api/recipes/<backend>/<path:recipe_id>")
+def api_get_recipe(backend, recipe_id):
+    """AJAX — get a single recipe in common format."""
+    cfg = config.load()
+    try:
+        if backend == "mealie":
+            client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"],
+                                  api_url=config.MEALIE_INTERNAL_URL)
+            recipe = client.get_recipe(recipe_id)
+        elif backend == "tandoor":
+            client = TandoorClient(cfg["tandoor_url"], cfg["tandoor_api_key"],
+                                    api_url=config.TANDOOR_INTERNAL_URL)
+            recipe = client.get_recipe(int(recipe_id))
+        else:
+            return jsonify({"ok": False, "error": "Ismeretlen backend."})
+        return jsonify({"ok": True, "recipe": recipe})
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)})
+
+
+@app.route("/api/recipes/<backend>/<path:recipe_id>", methods=["PUT"])
+def api_update_recipe(backend, recipe_id):
+    """AJAX — update a single recipe."""
+    cfg = config.load()
+    payload = request.get_json(silent=True)
+    if not payload:
+        return jsonify({"ok": False, "error": "Érvénytelen kérés."})
+    try:
+        if backend == "mealie":
+            client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"],
+                                  api_url=config.MEALIE_INTERNAL_URL)
+            client.update_recipe(recipe_id, payload)
+        elif backend == "tandoor":
+            client = TandoorClient(cfg["tandoor_url"], cfg["tandoor_api_key"],
+                                    api_url=config.TANDOOR_INTERNAL_URL)
+            client.update_recipe(int(recipe_id), payload)
+        else:
+            return jsonify({"ok": False, "error": "Ismeretlen backend."})
+        return jsonify({"ok": True, "message": "Recept sikeresen mentve."})
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)})
+
+
+@app.route("/api/recipes/<backend>/delete", methods=["POST"])
+def api_delete_recipes(backend):
+    """AJAX — delete one or more recipes."""
+    cfg = config.load()
+    payload = request.get_json(silent=True)
+    if not payload or not payload.get("ids"):
+        return jsonify({"ok": False, "error": "Nincs kiválasztott recept."})
+
+    ids = payload["ids"]
+    errors = []
+    try:
+        if backend == "mealie":
+            client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"],
+                                  api_url=config.MEALIE_INTERNAL_URL)
+            for slug in ids:
+                try:
+                    client.delete_recipe(slug)
+                except Exception as e:
+                    errors.append(f"{slug}: {e}")
+        elif backend == "tandoor":
+            client = TandoorClient(cfg["tandoor_url"], cfg["tandoor_api_key"],
+                                    api_url=config.TANDOOR_INTERNAL_URL)
+            for rid in ids:
+                try:
+                    client.delete_recipe(int(rid))
+                except Exception as e:
+                    errors.append(f"{rid}: {e}")
+        else:
+            return jsonify({"ok": False, "error": "Ismeretlen backend."})
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)})
+
+    deleted = len(ids) - len(errors)
+    if errors:
+        return jsonify({"ok": True, "deleted": deleted, "errors": errors,
+                        "message": f"{deleted} recept törölve, {len(errors)} hiba."})
+    return jsonify({"ok": True, "deleted": deleted,
+                    "message": f"{deleted} recept sikeresen törölve."})
+
+
+@app.route("/api/tags/<backend>")
+def api_list_tags(backend):
+    """Return tags/keywords with IDs for a specific backend."""
+    cfg = config.load()
+    try:
+        if backend == "mealie":
+            client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"],
+                                  api_url=config.MEALIE_INTERNAL_URL)
+            tags = client.list_tags()
+        elif backend == "tandoor":
+            client = TandoorClient(cfg["tandoor_url"], cfg["tandoor_api_key"],
+                                    api_url=config.TANDOOR_INTERNAL_URL)
+            tags = client.list_keywords()
+        else:
+            return jsonify({"ok": False, "error": "Ismeretlen backend."})
+        return jsonify({"ok": True, "tags": tags})
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)})
+
+
 @app.route("/tags", methods=["GET"])
 def list_all_tags():
     """Return existing tags from Mealie and Tandoor for autocomplete."""

app/mealie.py

@@ -97,6 +97,123 @@ class MealieClient:
         return [{"name": t["name"], "slug": t["slug"], "id": t["id"]}
                 for t in r.json().get("items", [])]
 
+    def list_recipes(self, search: str = "", tag_ids: list[str] | None = None,
+                     page: int = 1, per_page: int = 50) -> dict:
+        """List recipes with optional search and tag filtering.
+
+        Returns {"items": [...], "page": int, "per_page": int, "total": int}.
+        """
+        params: dict = {
+            "page": page, "perPage": per_page,
+            "orderBy": "name", "orderDirection": "asc",
+        }
+        if search:
+            params["search"] = search
+        if tag_ids:
+            # Mealie accepts repeated ?tags=<id>&tags=<id> params.
+            # requests encodes list values as repeated keys automatically.
+            params["tags"] = tag_ids
+        r = self.session.get(f"{self.api_url}/api/recipes", params=params,
+                             timeout=15)
+        r.raise_for_status()
+        data = r.json()
+        items = []
+        for item in data.get("items", []):
+            image_url = ""
+            if item.get("image"):
+                image_url = f"{self.base_url}/api/media/recipes/{item['id']}/images/min-original.webp"
+            items.append({
+                "id": item["slug"],
+                "name": item.get("name", ""),
+                "image": image_url,
+                "tags": [t["name"] for t in item.get("tags", [])],
+                "url": f"{self.base_url}/g/home/r/{item['slug']}",
+            })
+        return {
+            "items": items,
+            "page": data.get("page", page),
+            "per_page": data.get("perPage", per_page),
+            "total": data.get("total", 0),
+        }
+
+    def get_recipe(self, slug: str) -> dict:
+        """Fetch a single recipe and return it in the common format."""
+        r = self.session.get(f"{self.api_url}/api/recipes/{slug}", timeout=15)
+        r.raise_for_status()
+        data = r.json()
+
+        # Parse ingredients
+        ingredients = []
+        current_group = None
+        for ing in data.get("recipeIngredient", []):
+            group_title = ing.get("title", "")
+            if group_title and group_title != current_group:
+                ingredients.append({"group": group_title})
+                current_group = group_title
+            food_name = ""
+            if ing.get("food"):
+                food_name = ing["food"].get("name", "")
+            unit_name = ""
+            if ing.get("unit"):
+                unit_name = ing["unit"].get("name", "")
+            qty = ing.get("quantity", 0)
+            qty_str = ""
+            if qty:
+                qty_str = str(int(qty)) if qty == int(qty) else str(qty)
+            note = ing.get("note", "")
+            if food_name or qty_str or unit_name:
+                ingredients.append({
+                    "quantity": qty_str,
+                    "unit": unit_name,
+                    "food": food_name,
+                    "extra": note,
+                })
+
+        # Parse instructions
+        instructions = []
+        for step in data.get("recipeInstructions", []):
+            text = step.get("text", "").strip()
+            if text:
+                instructions.append(text)
+
+        # Parse tags
+        tags = [t["name"] for t in data.get("tags", [])]
+
+        # Image URL
+        image_url = ""
+        if data.get("image"):
+            image_url = f"{self.base_url}/api/media/recipes/{data['id']}/images/original.webp"
+
+        return {
+            "title": data.get("name", ""),
+            "description": data.get("description", ""),
+            "image_url": image_url,
+            "ingredients": ingredients,
+            "instructions": instructions,
+            "tags": tags,
+            "original_url": data.get("orgURL", ""),
+        }
+
+    def update_recipe(self, slug: str, recipe: dict) -> None:
+        """Update an existing recipe from a common-format dict."""
+        payload = self._build_payload(recipe)
+        tag_names = recipe.get("tags", [])
+        if tag_names:
+            payload["tags"] = self._ensure_tags(tag_names)
+        else:
+            payload["tags"] = []
+        r = self.session.patch(
+            f"{self.api_url}/api/recipes/{slug}",
+            json=payload,
+            timeout=15,
+        )
+        r.raise_for_status()
+
+    def delete_recipe(self, slug: str) -> None:
+        """Delete a recipe by slug."""
+        r = self.session.delete(f"{self.api_url}/api/recipes/{slug}", timeout=10)
+        r.raise_for_status()
+
     def create_recipe(self, recipe: dict) -> str:
         """Create a recipe in Mealie from a scraper result dict.
 

app/tandoor.py

@@ -80,6 +80,110 @@ class TandoorClient:
             params = {}  # next URL already has params
         return results
 
+    def list_recipes(self, search: str = "", keyword_ids: list[int] | None = None,
+                     page: int = 1, per_page: int = 50) -> dict:
+        """List recipes with optional search and keyword filtering.
+
+        Returns {"items": [...], "page": int, "per_page": int, "total": int}.
+        """
+        params: dict = {
+            "limit": per_page,
+            "offset": (page - 1) * per_page,
+            "format": "json",
+        }
+        if search:
+            params["query"] = search
+        if keyword_ids:
+            params["keywords"] = keyword_ids
+        r = self.session.get(f"{self.api_url}/api/recipe/", params=params,
+                             timeout=15)
+        r.raise_for_status()
+        data = r.json()
+        items = []
+        for item in data.get("results", []):
+            items.append({
+                "id": item["id"],
+                "name": item.get("name", ""),
+                "image": item.get("image") or "",
+                "tags": [k["name"] for k in item.get("keywords", [])],
+                "url": f"{self.base_url}/view/recipe/{item['id']}",
+            })
+        return {
+            "items": items,
+            "page": page,
+            "per_page": per_page,
+            "total": data.get("count", 0),
+        }
+
+    def get_recipe(self, recipe_id: int) -> dict:
+        """Fetch a single recipe and return it in the common format."""
+        r = self.session.get(f"{self.api_url}/api/recipe/{recipe_id}/",
+                             timeout=15)
+        r.raise_for_status()
+        data = r.json()
+
+        # Parse ingredients from all steps
+        ingredients = []
+        for step in data.get("steps", []):
+            for ing in step.get("ingredients", []):
+                if ing.get("is_header"):
+                    ingredients.append({"group": ing.get("note", "")})
+                    continue
+                food_name = ""
+                if ing.get("food"):
+                    food_name = ing["food"].get("name", "")
+                unit_name = ""
+                if ing.get("unit"):
+                    unit_name = ing["unit"].get("name", "")
+                amount = ing.get("amount", 0)
+                qty_str = ""
+                if amount:
+                    qty_str = str(int(amount)) if amount == int(amount) else str(amount)
+                note = ing.get("note", "")
+                if food_name or qty_str or unit_name:
+                    ingredients.append({
+                        "quantity": qty_str,
+                        "unit": unit_name,
+                        "food": food_name,
+                        "extra": note,
+                    })
+
+        # Parse instructions
+        instructions = []
+        for step in data.get("steps", []):
+            text = step.get("instruction", "").strip()
+            if text:
+                instructions.append(text)
+
+        # Parse tags
+        tags = [k["name"] for k in data.get("keywords", [])]
+
+        return {
+            "title": data.get("name", ""),
+            "description": data.get("description", ""),
+            "image_url": data.get("image") or "",
+            "ingredients": ingredients,
+            "instructions": instructions,
+            "tags": tags,
+            "original_url": data.get("source_url", ""),
+        }
+
+    def update_recipe(self, recipe_id: int, recipe: dict) -> None:
+        """Update an existing recipe from a common-format dict."""
+        payload = self._build_payload(recipe)
+        r = self.session.put(
+            f"{self.api_url}/api/recipe/{recipe_id}/",
+            json=payload,
+            timeout=15,
+        )
+        r.raise_for_status()
+
+    def delete_recipe(self, recipe_id: int) -> None:
+        """Delete a recipe by ID."""
+        r = self.session.delete(f"{self.api_url}/api/recipe/{recipe_id}/",
+                                timeout=10)
+        r.raise_for_status()
+
     def find_duplicate(self, url: str, title: str = "") -> dict | None:
         """Check if a recipe with this source URL already exists."""
         if not url and not title:

app/templates/base.html

@@ -217,6 +217,7 @@
             <span class="brand-white">Recept</span> <span class="brand-blue">Importáló</span>
         </a>
         <a href="/import" {% if request.path == '/import' %}class="active"{% endif %}>Importálás</a>
+        <a href="/recipes" {% if request.path.startswith('/recipes') %}class="active"{% endif %}>Receptek</a>
         <a href="/settings" {% if request.path == '/settings' %}class="active"{% endif %}>Beállítások</a>
         <span class="version">{{ version }}</span>
     </nav>

app/templates/recipe_edit.html

@@ -0,0 +1,575 @@
+{% extends "base.html" %}
+{% block title %}Recept szerkesztése — Recept Importáló{% endblock %}
+
+{% block head %}
+<style>
+    .section-divider { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
+    .recipe-image {
+        max-width: 300px;
+        max-height: 200px;
+        border-radius: var(--radius);
+        object-fit: cover;
+    }
+    .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: 60px; }
+    .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; }
+
+    /* 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>
+
+    <div class="flex flex-wrap mb-2">
+        <div class="grow">
+            <label for="recipeTitle">Név</label>
+            <input type="text" id="recipeTitle">
+
+            <label for="recipeDesc">Leírás</label>
+            <textarea id="recipeDesc" rows="2"></textarea>
+        </div>
+        <div>
+            <img id="recipeImage" class="recipe-image" src="" alt="" style="display:none;">
+        </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>
+        <span id="saveStatus"></span>
+    </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 || '';
+
+    const img = document.getElementById('recipeImage');
+    if (r.image_url) {
+        img.src = r.image_url;
+        img.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);
+}
+
+/* ===== 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);
+}
+
+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');
+    }
+});
+
+/* ===== 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: currentRecipe ? currentRecipe.image_url : null,
+        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;
+    }
+}
+
+/* ===== 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 %}

app/templates/recipes.html

@@ -0,0 +1,644 @@
+{% extends "base.html" %}
+{% block title %}Receptek — Recept Importáló{% endblock %}
+
+{% block head %}
+<style>
+    /* --- Tab bar (same as import.html) --- */
+    .tab-bar {
+        display: flex;
+        gap: 0;
+        border-bottom: 2px solid var(--border);
+        margin-bottom: 1.2rem;
+    }
+    .tab-btn {
+        background: none;
+        border: none;
+        color: var(--text-dim);
+        font-size: 1rem;
+        font-weight: 600;
+        padding: 0.6rem 1.2rem;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        margin-bottom: -2px;
+        transition: color 0.15s, border-color 0.15s;
+        font-family: inherit;
+    }
+    .tab-btn:hover { color: var(--text); }
+    .tab-btn.active {
+        color: var(--accent-light);
+        border-bottom-color: var(--accent-light);
+    }
+
+    /* --- Search & filter bar --- */
+    .search-bar {
+        display: flex;
+        gap: 0.75rem;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-bottom: 1rem;
+    }
+    .search-bar .search-input-wrap {
+        flex: 1;
+        min-width: 200px;
+    }
+    .search-bar input[type="text"] {
+        margin-bottom: 0;
+    }
+    .tag-filter-wrap {
+        min-width: 200px;
+        flex: 1;
+        position: relative;
+    }
+    .tag-filter-wrap input[type="text"] {
+        margin-bottom: 0;
+    }
+    .active-filter-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+        margin-bottom: 0.5rem;
+    }
+    .filter-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3rem;
+        background: var(--accent);
+        color: #fff;
+        padding: 0.2rem 0.6rem;
+        border-radius: 99px;
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+    .filter-chip .remove-chip {
+        cursor: pointer;
+        opacity: 0.7;
+        font-size: 1rem;
+        line-height: 1;
+    }
+    .filter-chip .remove-chip:hover { opacity: 1; }
+
+    /* Tag dropdown */
+    .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: 100;
+        display: none;
+    }
+    .tag-dropdown.open { display: block; }
+    .tag-dropdown-item {
+        padding: 0.5rem 0.75rem;
+        cursor: pointer;
+        font-size: 0.9rem;
+        display: flex;
+        justify-content: space-between;
+    }
+    .tag-dropdown-item:hover { background: var(--accent-glow); }
+
+    /* --- Action bar --- */
+    .action-bar {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 0.75rem;
+        padding: 0.5rem 0;
+    }
+    .action-bar label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        margin-bottom: 0;
+        cursor: pointer;
+        font-size: 0.9rem;
+    }
+    .action-bar .selection-info {
+        color: var(--text-dim);
+        font-size: 0.85rem;
+    }
+    .btn-danger {
+        background: var(--danger);
+    }
+    .btn-danger:hover {
+        background: #b62d2a;
+    }
+
+    /* --- Recipe list --- */
+    .recipe-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .recipe-row {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.6rem 0.75rem;
+        border-bottom: 1px solid var(--border);
+        transition: background 0.1s;
+    }
+    .recipe-row:hover {
+        background: var(--surface2);
+    }
+    .recipe-row.selected {
+        background: rgba(0,136,204,0.08);
+    }
+    .recipe-row input[type="checkbox"] {
+        flex-shrink: 0;
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+    }
+    .recipe-name-col {
+        flex: 1;
+        min-width: 0;
+    }
+    .recipe-name-col a {
+        color: var(--text);
+        text-decoration: none;
+        font-weight: 500;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .recipe-name-col a:hover {
+        color: var(--accent-light);
+    }
+    .recipe-tags-col {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        flex-shrink: 0;
+        max-width: 250px;
+    }
+    .recipe-tag-sm {
+        font-size: 0.7rem;
+        padding: 0.1rem 0.4rem;
+        background: var(--surface2);
+        border: 1px solid var(--border);
+        border-radius: 99px;
+        color: var(--text-dim);
+        white-space: nowrap;
+    }
+    .recipe-actions {
+        display: flex;
+        gap: 0.4rem;
+        flex-shrink: 0;
+    }
+    .btn-sm {
+        padding: 0.3rem 0.7rem;
+        font-size: 0.8rem;
+        border-radius: 8px;
+    }
+    .btn-icon {
+        padding: 0.3rem 0.5rem;
+        font-size: 0.85rem;
+    }
+
+    /* --- Pagination --- */
+    .pagination-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 1rem;
+        padding: 0.75rem 0;
+    }
+
+    /* --- Modal --- */
+    .modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.6);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .modal-card {
+        max-width: 450px;
+        width: 90%;
+    }
+    .modal-card h2 {
+        color: #f85149;
+    }
+
+    /* --- 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); }
+    }
+
+    /* --- Loading --- */
+    .loading-row {
+        text-align: center;
+        padding: 2rem;
+        color: var(--text-dim);
+    }
+    .empty-state {
+        text-align: center;
+        padding: 2rem;
+        color: var(--text-dim);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="card">
+    <!-- Backend tabs -->
+    <div class="tab-bar" id="backendTabs">
+        {% if has_mealie %}
+        <button class="tab-btn active" onclick="switchBackend('mealie')">Mealie</button>
+        {% endif %}
+        {% if has_tandoor %}
+        <button class="tab-btn{% if not has_mealie %} active{% endif %}" onclick="switchBackend('tandoor')">Tandoor</button>
+        {% endif %}
+    </div>
+
+    <!-- Search & tag filter -->
+    <div class="search-bar">
+        <div class="search-input-wrap">
+            <input type="text" id="recipeSearch" placeholder="Recept keresése..."
+                   oninput="onSearchInput()" autocomplete="off">
+        </div>
+        <div class="tag-filter-wrap">
+            <div class="active-filter-tags" id="activeFilterTags"></div>
+            <input type="text" id="tagFilterSearch" placeholder="Szűrés címke szerint..."
+                   autocomplete="off" oninput="onFilterTagSearch()" onfocus="onFilterTagSearch()">
+            <div id="tagFilterDropdown" class="tag-dropdown"></div>
+        </div>
+    </div>
+
+    <!-- Action bar -->
+    <div class="action-bar" id="actionBar" style="display:none;">
+        <label>
+            <input type="checkbox" id="selectAll" onchange="onSelectAll()">
+            Mind
+        </label>
+        <span class="selection-info" id="selectionCount"></span>
+        <button class="btn btn-danger btn-sm" onclick="confirmBulkDelete()" id="bulkDeleteBtn" disabled>
+            Törlés
+        </button>
+    </div>
+
+    <!-- Loading -->
+    <div id="loadingRow" class="loading-row hidden">
+        <span class="spinner"></span> Betöltés...
+    </div>
+
+    <!-- Recipe list -->
+    <div id="recipeList" class="recipe-list"></div>
+
+    <!-- Empty state -->
+    <div id="emptyState" class="empty-state hidden">Nincs találat.</div>
+
+    <!-- Pagination -->
+    <div id="pagination" class="pagination-bar hidden"></div>
+</div>
+
+<!-- Delete confirmation modal -->
+<div id="deleteModal" class="modal-overlay hidden">
+    <div class="modal-card card">
+        <h2>Recept törlése</h2>
+        <p id="deleteModalText"></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>
+/* ===== State ===== */
+let currentBackend = '{{ "mealie" if has_mealie else "tandoor" }}';
+let currentPage = 1;
+const perPage = 50;
+let searchTimeout = null;
+let selectedIds = new Set();
+let pendingDeleteIds = [];  // set by confirmDelete / confirmBulkDelete
+
+let backendTags = [];       // [{name, id}, ...]
+let activeFilterTagIds = [];
+let activeFilterTagNames = {};  // id -> name, for chip display
+
+/* ===== Escaping ===== */
+function escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+}
+
+/* ===== Backend switching ===== */
+function switchBackend(b) {
+    currentBackend = b;
+    currentPage = 1;
+    selectedIds.clear();
+    activeFilterTagIds = [];
+    activeFilterTagNames = {};
+    document.getElementById('activeFilterTags').innerHTML = '';
+    document.getElementById('recipeSearch').value = '';
+    document.querySelectorAll('#backendTabs .tab-btn').forEach(btn => {
+        btn.classList.toggle('active',
+            btn.textContent.trim().toLowerCase() === b.toLowerCase());
+    });
+    loadBackendTags();
+    loadRecipes();
+}
+
+/* ===== Search ===== */
+function onSearchInput() {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+        currentPage = 1;
+        selectedIds.clear();
+        loadRecipes();
+    }, 300);
+}
+
+/* ===== Tag filter ===== */
+async function loadBackendTags() {
+    try {
+        const r = await fetch('/api/tags/' + currentBackend);
+        const d = await r.json();
+        if (d.ok) backendTags = d.tags || [];
+        else backendTags = [];
+    } catch (e) { backendTags = []; }
+}
+
+function onFilterTagSearch() {
+    const input = document.getElementById('tagFilterSearch');
+    const dropdown = document.getElementById('tagFilterDropdown');
+    const q = input.value.trim().toLowerCase();
+    if (!q) { dropdown.classList.remove('open'); return; }
+
+    const activeSet = new Set(activeFilterTagIds.map(String));
+    const matches = backendTags
+        .filter(t => t.name.toLowerCase().includes(q) && !activeSet.has(String(t.id)))
+        .slice(0, 10);
+
+    if (matches.length === 0) { dropdown.classList.remove('open'); return; }
+
+    let html = '';
+    for (const t of matches) {
+        html += '<div class="tag-dropdown-item" onclick="addFilterTag(\'' +
+            escHtml(String(t.id)).replace(/'/g, "\\'") + '\', \'' +
+            escHtml(t.name).replace(/'/g, "\\'") + '\')">' +
+            escHtml(t.name) + '</div>';
+    }
+    dropdown.innerHTML = html;
+    dropdown.classList.add('open');
+}
+
+function addFilterTag(id, name) {
+    if (activeFilterTagIds.includes(String(id))) return;
+    activeFilterTagIds.push(String(id));
+    activeFilterTagNames[String(id)] = name;
+    renderFilterChips();
+    document.getElementById('tagFilterSearch').value = '';
+    document.getElementById('tagFilterDropdown').classList.remove('open');
+    currentPage = 1;
+    selectedIds.clear();
+    loadRecipes();
+}
+
+function removeFilterTag(id) {
+    activeFilterTagIds = activeFilterTagIds.filter(x => x !== String(id));
+    delete activeFilterTagNames[String(id)];
+    renderFilterChips();
+    currentPage = 1;
+    selectedIds.clear();
+    loadRecipes();
+}
+
+function renderFilterChips() {
+    const wrap = document.getElementById('activeFilterTags');
+    let html = '';
+    for (const id of activeFilterTagIds) {
+        const name = activeFilterTagNames[id] || id;
+        html += '<span class="filter-chip">' + escHtml(name) +
+            ' <span class="remove-chip" onclick="removeFilterTag(\'' +
+            escHtml(id).replace(/'/g, "\\'") + '\')">&times;</span></span>';
+    }
+    wrap.innerHTML = html;
+}
+
+/* ===== Close dropdown on outside click ===== */
+document.addEventListener('click', e => {
+    const wrap = document.querySelector('.tag-filter-wrap');
+    if (wrap && !wrap.contains(e.target)) {
+        document.getElementById('tagFilterDropdown').classList.remove('open');
+    }
+});
+
+/* ===== Load recipes ===== */
+async function loadRecipes() {
+    const list = document.getElementById('recipeList');
+    const loading = document.getElementById('loadingRow');
+    const empty = document.getElementById('emptyState');
+    const pagination = document.getElementById('pagination');
+    const actionBar = document.getElementById('actionBar');
+
+    loading.classList.remove('hidden');
+    list.innerHTML = '';
+    empty.classList.add('hidden');
+    pagination.classList.add('hidden');
+    actionBar.style.display = 'none';
+
+    const search = document.getElementById('recipeSearch').value.trim();
+    const params = new URLSearchParams({ page: currentPage, per_page: perPage });
+    if (search) params.set('search', search);
+    if (activeFilterTagIds.length) params.set('tag_ids', activeFilterTagIds.join(','));
+
+    try {
+        const resp = await fetch('/api/recipes/' + currentBackend + '?' + params);
+        const data = await resp.json();
+        loading.classList.add('hidden');
+
+        if (!data.ok) {
+            list.innerHTML = '<div class="alert alert-danger">' + escHtml(data.error) + '</div>';
+            return;
+        }
+
+        if (data.items.length === 0) {
+            empty.classList.remove('hidden');
+            return;
+        }
+
+        actionBar.style.display = 'flex';
+        renderRecipeList(data.items);
+        renderPagination(data.page, data.per_page, data.total);
+        updateSelectionUI();
+    } catch (e) {
+        loading.classList.add('hidden');
+        list.innerHTML = '<div class="alert alert-danger">Hiba: ' + escHtml(e.message) + '</div>';
+    }
+}
+
+/* ===== Render recipe list ===== */
+function renderRecipeList(items) {
+    const list = document.getElementById('recipeList');
+    let html = '';
+    for (const r of items) {
+        const sel = selectedIds.has(String(r.id));
+        const tagsHtml = r.tags.slice(0, 5).map(t =>
+            '<span class="recipe-tag-sm">' + escHtml(t) + '</span>'
+        ).join('');
+        const editUrl = '/recipes/' + currentBackend + '/' + encodeURIComponent(r.id) + '/edit';
+        html += '<div class="recipe-row' + (sel ? ' selected' : '') + '" data-id="' + escHtml(String(r.id)) + '">' +
+            '<input type="checkbox" ' + (sel ? 'checked ' : '') +
+                'onchange="onRecipeToggle(this, \'' + escHtml(String(r.id)).replace(/'/g, "\\'") + '\')">' +
+            '<div class="recipe-name-col"><a href="' + escHtml(r.url) + '" target="_blank" title="' +
+                escHtml(r.name) + '">' + escHtml(r.name) + '</a></div>' +
+            '<div class="recipe-tags-col">' + tagsHtml + '</div>' +
+            '<div class="recipe-actions">' +
+                '<a href="' + editUrl + '" class="btn btn-secondary btn-sm btn-icon" title="Szerkesztés">&#9998;</a>' +
+                '<button class="btn btn-danger btn-sm btn-icon" title="Törlés" ' +
+                    'onclick="confirmSingleDelete(\'' + escHtml(String(r.id)).replace(/'/g, "\\'") + '\', \'' +
+                    escHtml(r.name).replace(/'/g, "\\'") + '\')">&#128465;</button>' +
+            '</div></div>';
+    }
+    list.innerHTML = html;
+}
+
+/* ===== Pagination ===== */
+function renderPagination(page, pp, total) {
+    const totalPages = Math.ceil(total / pp);
+    if (totalPages <= 1) return;
+    const bar = document.getElementById('pagination');
+    bar.classList.remove('hidden');
+    let html = '';
+    if (page > 1) {
+        html += '<button class="btn btn-secondary btn-sm" onclick="goToPage(' + (page - 1) + ')">&larr; Előző</button>';
+    }
+    html += '<span class="text-dim">' + page + ' / ' + totalPages + ' (összesen: ' + total + ')</span>';
+    if (page < totalPages) {
+        html += '<button class="btn btn-secondary btn-sm" onclick="goToPage(' + (page + 1) + ')">Következő &rarr;</button>';
+    }
+    bar.innerHTML = html;
+}
+
+function goToPage(p) {
+    currentPage = p;
+    loadRecipes();
+    window.scrollTo(0, 0);
+}
+
+/* ===== Selection ===== */
+function onRecipeToggle(cb, id) {
+    if (cb.checked) selectedIds.add(id);
+    else selectedIds.delete(id);
+    cb.closest('.recipe-row').classList.toggle('selected', cb.checked);
+    updateSelectionUI();
+}
+
+function onSelectAll() {
+    const checked = document.getElementById('selectAll').checked;
+    document.querySelectorAll('#recipeList input[type="checkbox"]').forEach(cb => {
+        cb.checked = checked;
+        const id = cb.closest('.recipe-row').dataset.id;
+        if (checked) selectedIds.add(id);
+        else selectedIds.delete(id);
+        cb.closest('.recipe-row').classList.toggle('selected', checked);
+    });
+    updateSelectionUI();
+}
+
+function updateSelectionUI() {
+    const count = selectedIds.size;
+    document.getElementById('selectionCount').textContent =
+        count > 0 ? count + ' kiválasztva' : '';
+    document.getElementById('bulkDeleteBtn').disabled = count === 0;
+    const checkboxes = document.querySelectorAll('#recipeList input[type="checkbox"]');
+    document.getElementById('selectAll').checked =
+        checkboxes.length > 0 &&
+        document.querySelectorAll('#recipeList input[type="checkbox"]:not(:checked)').length === 0;
+}
+
+/* ===== Delete ===== */
+function confirmSingleDelete(id, name) {
+    pendingDeleteIds = [id];
+    document.getElementById('deleteModalText').textContent =
+        'Biztosan törölni szeretnéd a következő receptet: „' + name + '"? Ez a művelet nem vonható vissza!';
+    document.getElementById('deleteModal').classList.remove('hidden');
+}
+
+function confirmBulkDelete() {
+    if (selectedIds.size === 0) return;
+    pendingDeleteIds = Array.from(selectedIds);
+    document.getElementById('deleteModalText').textContent =
+        'Biztosan törölni szeretnéd a kiválasztott ' + pendingDeleteIds.length +
+        ' receptet? Ez a művelet nem vonható vissza!';
+    document.getElementById('deleteModal').classList.remove('hidden');
+}
+
+function closeDeleteModal() {
+    document.getElementById('deleteModal').classList.add('hidden');
+}
+
+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/' + currentBackend + '/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ids: pendingDeleteIds }),
+        });
+        const data = await resp.json();
+        closeDeleteModal();
+        btn.disabled = false;
+        btn.textContent = 'Törlés';
+
+        if (data.ok) {
+            for (const id of pendingDeleteIds) selectedIds.delete(String(id));
+            showToast(data.message, 'success');
+            loadRecipes();
+        } else {
+            showToast(data.error || 'Hiba történt.', 'error');
+        }
+    } catch (e) {
+        btn.disabled = false;
+        btn.textContent = 'Törlés';
+        closeDeleteModal();
+        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 ===== */
+loadBackendTags();
+loadRecipes();
+</script>
+{% endblock %}