---
bodyClass: c-home
---

{% extends 'layouts/base.njk' %}

{% block content %}
    <section>
        <div class="l-container">
            <h1>{{title}}{% if authorInTitle %} {{ site.author }}{% endif %}</h1>
        </div>
    </section>

    <section>
        <div class="l-container">
            {% set homeSearch = true %}
            {% include "components/search.njk" %}
        </div>
    </section>

    {% if collections[highlightedTag] %}
        <section class="u-bgc-grey-100">
            <div class="l-container">
                <h2 class="u-mb-large">{{ highlightedTitle }}</h2>
                <div class="c-card__wrapper">
                    {% set favouriteRecipes = collections[highlightedTag] | limit(4) %}
                    {% for recipe in favouriteRecipes %}
                        <div class="c-card">
                            {% recipeimage recipe.data.image, "c-card__image", recipe.data.title, "(min-width: 1150px) 25vw, (min-width: 850px) 33vw, (min-width: 550px) 50vw, 100vw" %}
                            <div class="c-card__info">
                                <div>
                                    {% for tag in recipe.data.tags %}
                                        <abbr class="c-card__tag-abbr" title="{{ tag | noEmoji }}">{{ tag | onlyEmoji | safe }}</abbr>
                                    {% endfor %}
                                </div>
                                {% if recipe.data.time %}
                                    <div class="card__time">
                                        {% include 'icons/time.svg' %}
                                        {{ recipe.data.time }}
                                    </div>
                                {% endif %}
                            </div>
                            <a class="c-card__title-wrapper" href="{{ recipe.url }}">
                                <h3 class="c-card__title">{{ recipe.data.title }}</h3>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                <a href="/tags/{{ highlightedTag | noEmoji | slug }}" class="c-home__highlighted-tag-link">{{ highlightedLinkText }}</a>
            </div>
        </section>
    {% endif %}
{% endblock %}