{% extends "base.html" %}
{% block title %}Recipes - Cook{% endblock %}
{% block content %}
<div>
{% if !breadcrumbs.is_empty() %}
<nav class="mb-4">
<ol class="flex items-center space-x-2 text-sm text-gray-600">
<li><a href="{{ prefix }}/" class="hover:text-gray-900">{{ tr.t("nav-recipes") }}</a></li>
{% for crumb in breadcrumbs %}
<li class="flex items-center">
<span class="mx-2 text-gray-400">/</span>
<a href="{{ prefix }}/directory/{{ crumb.path }}" class="hover:text-gray-900">{{ crumb.name }}</a>
</li>
{% endfor %}
</ol>
</nav>
{% endif %}
<div class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
{{ current_name }}
</h1>
<a href="{{ prefix }}/new" class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:from-orange-600 hover:to-red-600 transition-all shadow-md flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
{{ tr.t("new-recipe") }}
</a>
</div>
{% match todays_menu %}
{% when Some with (menu) %}
<div class="mb-8 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-lg p-6 text-white">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div class="flex-1">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">📋</span>
<h2 class="text-xl font-bold">{{ tr.t("todays-menu-title") }}</h2>
<span class="text-sm opacity-80">{{ menu.date_display }}</span>
</div>
<p class="text-sm opacity-90">{{ tr.t("todays-menu-from") }}: {{ menu.menu_name }}</p>
</div>
<a href="{{ prefix }}/recipe/{{ menu.menu_path }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-purple-700 rounded-xl font-semibold hover:bg-purple-50 transition-colors shadow-md self-start sm:self-center whitespace-nowrap">
{{ tr.t("todays-menu-view") }}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
{% when None %}
{% endmatch %}
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for item in items %}
{% if item.is_directory %}
<a href="{{ prefix }}/directory/{{ item.path }}" class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
<div class="p-6 flex-1">
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mb-4">
<span class="text-2xl">📁</span>
</div>
<h3 class="font-bold text-lg mb-2">{{ item.name }}</h3>
{% match item.count %}
{% when Some with (count) %}
<span class="text-sm text-orange-600 font-medium">{{ count }} recipes</span>
{% when None %}
{% endmatch %}
</div>
</a>
{% else %}
<a href="{{ prefix }}/recipe/{{ item.path }}" class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 recipe-card flex flex-col">
{% match item.image_path %}
{% when Some with (img) %}
<div class="h-48 bg-gray-100 overflow-hidden">
<img src="{{ img }}" alt="{{ item.name }}" class="w-full h-full object-cover hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
{% when None %}
<div class="p-6">
<div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br {% if item.is_menu %}from-purple-400 to-pink-500{% else %}from-orange-400 to-pink-500{% endif %} rounded-full mb-4">
<span class="text-2xl">{% if item.is_menu %}📋{% else %}🍽️{% endif %}</span>
</div>
{% endmatch %}
<h3 class="font-bold text-lg mb-2 text-gray-800">
{{ item.name }}
{% if item.is_menu %}
<span class="ml-2 text-xs bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 px-2 py-1 rounded-full font-semibold">{{ tr.t("recipe-type-menu") }}</span>
{% endif %}
</h3>
{% match item.description %}
{% when Some with (description) %}
<p class="text-gray-600 text-sm">{{ description }}</p>
{% when None %}
{% endmatch %}
{% if !item.tags.is_empty() %}
<div class="mt-3 flex flex-wrap gap-2">
{% for tag in item.tags.iter().take(3) %}
<span class="text-xs bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-700 px-2 py-1 rounded-full font-medium">{{ tag }}</span>
{% endfor %}
{% if item.tags.len() > 3 %}
<span class="text-xs text-gray-500">+{{ item.tags.len() - 3 }}</span>
{% endif %}
</div>
{% endif %}
</div>
</a>
{% endif %}
{% endfor %}
{% if items.is_empty() %}
<div class="text-gray-500 text-center py-8">
{{ tr.t("recipes-empty") }}
</div>
{% endif %}
</div>
</div>
{% endblock %}