{{!< default}}

<article class="lol-container annual-reports outer">
    <div class="inner">
        <div class="historical-listing">
            {{#foreach posts}}
                {{#if @index}}
                    <div class="report-entry">
                        {{> "icons/arrow-right"}}
                        <a href="{{url}}">{{title}}</a>
                    </div>
                {{/if}}
            {{/foreach}}
        </div>
        <div class="latest-post">
            {{#get "posts" limit="1"}}
                {{#if posts}}
                    {{#with posts.[0]}}
                        <article>
                            <header class="gh-header gh-canvas">
                                <span class="gh-post-meta">
                                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
                                </span>
                                <h1 class="gh-title">{{title}}</h1>

                                {{#if feature_image}}
                                    <figure class="gh-feature-image">
                                        <picture>
                                            <source
                                                srcset="
                                                {{img_url feature_image size="xxs" format="avif"}} 30w,
                                                {{img_url feature_image size="xs" format="avif"}} 100w,
                                                {{img_url feature_image size="s" format="avif"}} 300w,
                                                {{img_url feature_image size="m" format="avif"}} 600w,
                                                {{img_url feature_image size="l" format="avif"}} 1200w,
                                                {{img_url feature_image size="xl" format="avif"}} 2000w"
                                                sizes="(min-width: 1200px) 1200px, 90vw"
                                                type="image/avif"
                                            >
                                            <source
                                                srcset="
                                                {{img_url feature_image size="xxs" format="webp"}} 30w,
                                                {{img_url feature_image size="xs" format="webp"}} 100w,
                                                {{img_url feature_image size="s" format="webp"}} 300w,
                                                {{img_url feature_image size="m" format="webp"}} 600w,
                                                {{img_url feature_image size="l" format="webp"}} 1200w,
                                                {{img_url feature_image size="xl" format="webp"}} 2000w"
                                                sizes="(min-width: 1200px) 1200px, 90vw"
                                                type="image/webp"
                                            >
                                            <img
                                                srcset="
                                                {{img_url feature_image size="xxs"}} 30w,
                                                {{img_url feature_image size="xs"}} 100w,
                                                {{img_url feature_image size="s"}} 300w,
                                                {{img_url feature_image size="m"}} 600w,
                                                {{img_url feature_image size="l"}} 1200w,
                                                {{img_url feature_image size="xl"}} 2000w"
                                                sizes="(min-width: 1200px) 1200px, 90vw"
                                                src="{{img_url feature_image size="l"}}"
                                                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                                            >
                                        </picture>
                                        {{#if feature_image_caption}}
                                            <figcaption>{{feature_image_caption}}</figcaption>
                                        {{/if}}
                                    </figure>
                                {{/if}}
                            </header>
                            <div class="gh-content gh-canvas">
                                {{content}}
                            </div>
                        </article>
                    {{/with}}
                {{else}}
                    <p>No annual reports found.</p>
                {{/if}}
            {{/get}}
        </div>
    </div>
</article>