// src/components/apps/extranet/subcategory-overview/app-subcategory-overview/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: >-
  https://finstral.com/apps/extranet/subcategory-overview/app-subcategory-overview
type: object
required:
  - index_name
  - langcode
  - refinement_lists
  - subcategory
additionalProperties: false
properties:
  index_name:
    type: string
  langcode:
    type: string
  refinement_lists:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - title
        - facet_key
      properties:
        title:
          type: string
        facet_key:
          type: string
  subcategory:
    type: object
    additionalProperties: false
    required:
      - label
      - value
    properties:
      label:
        type: string
      value:
        type: number

// src/components/apps/extranet/subcategory-overview/app-subcategory-overview/mocks.yaml

index_name: finstral_extranet_stage
langcode: en
refinement_lists:
  - title: Language
    facet_key: language
  - title: Product family
    facet_key: product_family
  - title: Wall Type
    facet_key: wall_type
subcategory:
  label: Handbooks
  value: 142

// src/components/apps/extranet/subcategory-overview/app-subcategory-overview/app-subcategory-overview.twig

{{ attach_library('finstral_global/apps-app-subcategory-overview') }}

{% set data = {
	refinementLists: refinement_lists,
	subcategory: {
		label: subcategory.label[0]['#context'].value,
		value: subcategory.value,
	},
} %}

{% set algolia_data = {
	indexName: index_name,
	langCode: langcode,
} %}

<section class="u-container">
	<h1 class="u-typo-HeadlineM">
		{{ subcategory.label }}
	</h1>

	<app-subcategory-overview>
		<search class="ExtranetSearch-search" data-placeholder="{{ "search.placeholder"|tc }}"></search>

		{% include "@apps/extranet/components/search/refinements/refinements.twig" with {
			label: "search.refinements.title"|tc,
			name: "search-refinements",
		} only %}

		{% include "@apps/extranet/components/search/refinement-tags/refinement-tags.twig" %}

		<section class="ExtranetSearch-resultsContainer">
			{% include "@apps/extranet/components/search/refinement-list/refinement-list.twig" %}
			{% include "@apps/extranet/components/search/result-bar/result-bar.twig" %}
			{% include "@apps/extranet/components/search/extranet-results/extranet-results.twig" %}
		</section>
	</app-subcategory-overview>
</section>

<script id="subcategory-overview-data" type="application/json">{{ data|json_encode()|raw }}</script>
<script id="algolia-data" type="application/json">{{ algolia_data|json_encode()|raw }}</script>