{{define "content"}}
    {{- if not (eq .HTMX.Request.Target "posts")}}
        {{template "top-content" .}}
    {{- end}}

    {{template "posts" .}}

    {{- if not (eq .HTMX.Request.Target "posts")}}
        {{template "file-msg" .}}
    {{- end}}
{{end}}

{{define "top-content"}}
    Hello homepage
    <p><img src="{{file "gopher.png"}}" alt="Gopher"/></p>

    <section class="section">
        <h1 class="title">Recent posts</h1>
        <h2 class="subtitle">
            Below is an example of both paging and AJAX fetching using HTMX
        </h2>
    </section>
{{end}}

{{define "posts"}}
    <div id="posts">
        {{- range .Data}}
            <article class="media">
                <figure class="media-left">
                    <p class="image is-64x64">
                        <img src="{{file "gopher.png"}}" alt="Gopher"/>
                    </p>
                </figure>
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong>{{.Title}}</strong>
                            <br>
                            {{.Body}}
                        </p>
                    </div>
                </div>
            </article>
        {{- end}}

        <div class="field is-grouped is-grouped-centered">
            {{- if not $.Pager.IsBeginning}}
                <p class="control">
                    <button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{sub $.Pager.Page 1}}" hx-target="#posts">Previous page</button>
                </p>
            {{- end}}
            {{- if not $.Pager.IsEnd}}
                <p class="control">
                    <button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{add $.Pager.Page 1}}" hx-target="#posts">Next page</button>
                </p>
            {{- end}}
        </div>
    </div>
{{end}}

{{define "file-msg"}}
    <article class="message is-small is-info mt-4" x-data="{show: true}" x-show="show">
        <div class="message-header">
            <p>Serving files</p>
            <button class="delete is-small" aria-label="delete" x-on:click="show = false"></button>
        </div>
        <div class="message-body">
            In the example posts above, check how the file URL contains a cache-buster query parameter which changes only when the app is restarted.
            Static files also contain cache-control headers which are configured via middleware.
            You can also use AlpineJS to dismiss this message.
        </div>
    </article>
{{end}}