{{!--
    Reiseziele: die acht größten Themen als Kacheln. Gezeigt wird das Bild des Tags;
    hat der Tag keines, das Titelbild seines neuesten Beitrags. Ohne beides bleibt die
    Kachel einfarbig. Das Bild muss direkt vor .tile__text stehen (siehe screen.css).
--}}
{{#get "tags" limit="8" include="count.posts" order="count.posts desc" filter="visibility:public"}}
    <section class="section">
        <header class="section__header">
            <h2 class="section__title">{{t "Destinations"}}</h2>
        </header>
        <div class="tiles">
            {{#foreach tags}}
                <a class="tile" href="{{url}}">
                    {{#if feature_image}}
                        <img loading="lazy"
                            srcset="{{img_url feature_image size="s"}} 400w, {{img_url feature_image size="m"}} 750w"
                            sizes="(max-width: 640px) 50vw, 290px"
                            src="{{img_url feature_image size="s"}}" alt="">
                    {{else}}
                        {{#get "posts" filter="tag:{{slug}}+feature_image:-null" limit="1"}}
                            {{#foreach posts}}
                                <img loading="lazy"
                                    srcset="{{img_url feature_image size="s"}} 400w, {{img_url feature_image size="m"}} 750w"
                                    sizes="(max-width: 640px) 50vw, 290px"
                                    src="{{img_url feature_image size="s"}}" alt="">
                            {{/foreach}}
                        {{/get}}
                    {{/if}}
                    <span class="tile__text">
                        <span class="tile__name">{{name}}</span>
                        <span class="tile__count">{{plural count.posts empty=(t "No posts") singular=(t "% post") plural=(t "% posts")}}</span>
                    </span>
                </a>
            {{/foreach}}
        </div>
    </section>
{{/get}}