$(function() {
  $('<div>', {
    class: 'header',
    html: 'Similar jobs'
  }).appendTo('#similar_jobs');
  $('<div>', {
    id: 'similar_jobs_list',
    class: 'jobs_list'
  }).appendTo('#similar_jobs');
  
  const searchClient = algoliasearch('UM59DWRPA1', '33719eb8d9f28725f375583b7e78dbab');
  const { configure } = instantsearch.widgets;

  const search = instantsearch({
    indexName: 'production_Infosys_jobs',
    searchClient,
    routing: true
  });
  
  search.addWidgets([
    configure({
      hitsPerPage: 5,
      // facetFilters: "domain:" + $('#custom_field_domain').text(),
      filters: "domain:" + $('#custom_field_domain').text() + ' AND NOT external_id:' + $('#custom_field_reqid').text()
    }),

    instantsearch.widgets.hits({
      container: '#similar_jobs_list',
      templates: {
        item(hit, { html, components }) {
          return html`
            <a href="https://digitalcareers.infosys.com/global-careers/company-job/description/reqid/${hit.external_id}" class="job">
              <div class="left-section">
                <div class="similar-job-title">${components.Highlight({ hit, attribute: 'title' })}</div>
                <div class="similar-job-location ">
                  <div class="location-inline">${components.Highlight({ hit, attribute: 'work_location' })}, ${components.Highlight({ hit, attribute: 'country' })}</div>
                </div>
                <div class="similar-job-description">
                  <div class="location-inline">${components.Highlight({ hit, attribute: 'summary' })}</div>
                </div>
              </div>
            </a>
          `;
        },
      },
    }),
  ]);

  search.start();
});