{layout='layouts/_html-wrapper'}

<div class="container my-12 mx-auto px-4 md:px-12">
    <div class="flex flex-wrap -mx-1 lg:-mx-4">
    {!-- Low Search tag pair to display initial set of results--}
    {exp:low_search:results
        channel='add_on_store'
        limit='4'
        paginate="bottom"
    }
        {!-- if no results, let the user know --}
        {if low_search_no_results}
            <div class="alert alert--empty">No Add-ons</div>
        {/if}

        {!-- the card used to display the add-on information --}
        {!-- Tailwind card component source: https://tailwindcomponents.com/component/quote-card-with-image-1 --}
            <div class=" flex flex-col my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
                <div class="max-w-2xl bg-white border-2 border-gray-300 p-5 rounded-md tracking-wide shadow-lg flex-1">
                        <div id="header" class="flex"> 
                            <img alt="addon icon" class="rounded-md border-2 border-gray-300" style="width:100px;height:100px;" src="{add_on_icon}"/>
                            <div id="body" class="flex flex-col ml-5">
                                <h4 id="name" class="text-xl font-semibold mb-2">{title}</h4>
                                <p id="job" class="text-gray-800 mt-2">{add_on_description:limit characters='100'}</p>
                                <div class="flex mt-5">
                                <p class="ml-3">
                                    {if add_on_price == '0'}
                                        Free
                                    {if:else}
                                        <sup>$</sup>{add_on_price}
                                    {/if}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {!-- pagination since we're limiting to 4 results on a page --}
        {!-- Tailwind pagination component source: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/pagination/with-numbers --}
        {paginate}
            <div class="container py-2">
                <nav class="block">
                    <ul class="flex pl-0 rounded list-none flex-wrap">
                        {pagination_links}
                            {first_page}
                            <li>
                                <a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
                                {pagination_page_number}
                                </a>
                            </li>
                            {/first_page}

                            {page}
                            <li>
                                <a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
                                {pagination_page_number}
                                </a>
                            </li>
                            {/page}

                            {last_page}
                            <li>
                                <a href="{pagination_url}" class="first:ml-0 text-xs font-semibold flex w-8 h-8 mx-1 p-0 rounded-full items-center justify-center leading-tight relative border border-solid border-blue-500 {if current_page}text-white bg-blue-500{if:else}bg-white text-blue-500{/if}" style="width:30px;">
                                {pagination_page_number}
                                </a>
                            </li>
                            {/last_page}
                        {/pagination_links}
                    </ul>
                </nav>
            </div>
        {/paginate}

    {/exp:low_search:results}
    </div>
</div>