@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend

@{
    string queryName = "PostsCurrentPage";
    string repositoryName = "Post";
    string layout = "PostListCompact";
    int parentPageId = Model.Item.GetLink("ParentPage")?.PageId != null ? Model.Item.GetLink("ParentPage").PageId : Pageview.Page.ID;

    string queryPath =
    $"/dwapi/query?QueryName={queryName}&RepositoryName={repositoryName}&AreaId={Pageview?.Area.ID}&ParentPageID={parentPageId}";
    queryPath += !string.IsNullOrEmpty(Dynamicweb.Context.Current.Request.QueryString.Get("postq")) ?
    $"&postq={Dynamicweb.Context.Current.Server.UrlEncode(Dynamicweb.Context.Current.Request.QueryString.Get("postq"))}" :
    string.Empty;
}

<div>
    <div hx-get="@queryPath" 
        hx-trigger="intersect once" 
        hx-replace-url="false"
        hx-headers='{"x-dw-template": "/Designs/Swift-v2/QueryPublisher/@(layout).cshtml", "accept": "text/html"}'
        hx-on:htmx:response-error="this.innerHTML = document.querySelector('#response-error-@(Model.ID)').innerHTML">
        <div class="d-grid gap-2">
            @for (var i = 0; i < 4; i++)
            {
                <div class="g-col-12 card text-decoration-none" style="min-height: 7rem;">
                    <div class="grid gap-0 h-100">
                        <div class="g-col-3 p-2 h-100">
                            <div class="img-fluid bg-body text-body bg-opacity-10 icon-6 w-100 h-100" style="--bs-body-bg-rgb: var(--dw-color-foreground-rgb); --bs-text-opacity: .25;">
                                @ReadFile("/Files/Images/Icons/image.svg")
                            </div>
                        </div>
                        <div class="g-col-9">
                            <div class="card-body p-2 h-100">
                                <p class="card-text placeholder w-100 mb-2"></p>
                                <p class="card-text fs-7 placeholder w-75 mb-2"></p>
                                <div class="opacity-75 fs-8">@DateTime.Now.ToShortDateString()</div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<template id="response-error-@(Model.ID)">
    <div class="alert alert-dark w-100 text-center" role="alert">
        @Translate("No results found")
    </div>
</template>