10-partial-search-results.html

<style>
.fa-heart {
    background: 0 0;
    color: #ba1f3b;
    padding: 4px;
    cursor: pointer;
}
</style>
{!-- 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="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>
            {exp:favorites:info
					entry_id="{entry_id}"
		disable_pagination="yes"
				}
					{exp:favorites:edit
						favorite_id="{favorites:favorite_id}"
						return="add-ons"
					}
						<input type="hidden" name="delete" value="yes">
						<input type="hidden" name="entry-id" value="{entry_id}">
						<button class="w-1" type="submit" value="Remove">
							<i class="fas fa-heart favorite-toggle active"></i>
						</button>
					{/exp:favorites:edit}
					{if favorites:no_results}
						{exp:favorites:form
							entry_id="{entry_id}"
							return="add-ons"
						}
						<input type="hidden" name="entry-id" value="{entry_id}">
							<button class="w-1" type="submit" value="Add">
								<i class="far fa-heart favorite-toggle"></i>
							</button>
						{/exp:favorites:form}
						
					{/if}
				{/exp:favorites:info}
            <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>
        {!-- 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="pagination__page 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="pagination__page 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="pagination__page 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}