<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-client@latest/dist/afosto-instant-search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script>

<!-- or include the full Satellite theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

<div class="container">
	<div class="layout">
		<div id="searchbox"></div>
		<div class="filters">
			<div id="current-refinements"></div>
			<div id="clear-refinements"></div>
			<div id="genre-filter"></div>
			<div id="release-year-filter"></div>
		</div>
		<div id="stats"></div>
		<div id="hits"></div>
		<div id="pagination"></div>
		<div id="hits-per-page"></div>
	</div>
</div>

.container {
	max-width: 1200px;
	width: calc(100% - 32px);
	margin: 16px auto;
}
	
.layout {
	display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr auto;
	gap: 16px;
	// 👕 hits
    // ⚙️ filters
    // 🔎 search
    // 📏 pageSize
    // 🔢 pagination
    grid-template-areas:
			'🔎 🔎 🔎'
			'⚙️ 👕 👕'
			'⚙️ 📏 🔢';
    height: 100%;
    overflow: hidden;
}

#searchbox {
	grid-area: 🔎;
}

#hits {
	grid-area: 👕;
}
.filters {
	grid-area: ⚙️;
}

#pagination {
	grid-area: 🔢;
}

#hits-per-page {
	grid-area: 📏;
}
.ais-Hits {
      &-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px;
        margin: 0;

        @media (min-width: 800px) {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      &-item {
        width: auto;
        margin: 0;
        padding: 0;
        background-color: var(--af-is-common-white);
        border-radius: 4px;

        &-inner {
          display: flex;
          flex-direction: column;
          height: 100%;
          padding: 16px;
        }

        a {
          text-decoration: none;
        }

        &-image {
          position: relative;
          padding-top: 100%;
          margin-bottom: 24px;

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        &-title {
          display: block;
          font-weight: 600;
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 12px;
          color: var(--af-is-gray-120);
        }

        &-description {
          display: -webkit-box;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 20px;
          color: var(--af-is-gray-100);
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }

const client = afostoInstantSearch("movies-demo");

const refinementListWithPanel = (header) =>
	instantsearch.widgets.panel({
		templates: {
			header
		}
	})(instantsearch.widgets.refinementList);

async function initSearch() {
	const settings = await client.getSettings();
	const [firstIndex] = settings.indexes || [];

	const search = instantsearch({
		indexName: firstIndex.alias,
		searchClient: client
	});

	search.addWidgets([
		instantsearch.widgets.searchBox({
			container: "#searchbox"
		}),

		instantsearch.widgets.currentRefinements({
			container: "#current-refinements"
		}),

		instantsearch.widgets.clearRefinements({
			container: "#clear-refinements"
		}),

		refinementListWithPanel("genre")({
			container: "#genre-filter",
			attribute: "main_genre"
		}),

		refinementListWithPanel("Release year")({
			container: "#release-year-filter",
			attribute: "release_year_range"
		}),

		instantsearch.widgets.pagination({
			container: "#pagination"
		}),

		instantsearch.widgets.hitsPerPage({
			container: "#hits-per-page",
			items: [
				{ label: "8 hits per page", value: 8, default: true },
				{ label: "16 hits per page", value: 16 },
				{ label: "24 hits per page", value: 24 }
			]
		}),

		instantsearch.widgets.hits({
			container: "#hits",
			templates: {
				item: `
					<div class="ais-Hits-item-inner">
						<div class="ais-Hits-item-image">
					  		<img src="{{poster}}" align="left" alt="{{title}}" />
					  	</div>
						  <div class="ais-Hits-item-title">
							{{title}}
						  </div>
						  <div class="ais-Hits-item-description">
							{{ description }}
						  </div>
						  </div>
					`
			}
		})
	]);

	search.start();
}

initSearch();