{% 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 %}