// src/components/apps/extranet/asset-detail/app-asset-detail/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: https://finstral.com/apps/extranet/asset-detail/app-asset-detail
type: object
required:
  - asset
  - back_link
  - title
  - details
  - downloads
additionalProperties: false
properties:
  back_link:
    type: string
    format: uri-reference
  details:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - label
        - values
      properties:
        label:
          type: string
        values:
          type: array
          items:
            type: string
  downloads:
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - label
        - metadata
        - url
      properties:
        label:
          type: string
        url:
          type: string
          format: uri-reference
        metadata:
          type: object
          additionalProperties: false
          required:
            - filesize
            - filetype
          properties:
            filesize:
              type: string
            filetype:
              type: string
        file_icon:
          type: string
  asset:
    type: object
    additionalProperties: false
    required:
      - height
      - url
      - width
    properties:
      alt:
        type: string
      height:
        type: integer
      type:
        type: string
      url:
        type: string
        format: uri-reference
      width:
        type: integer
  title:
    type: string

// src/components/apps/extranet/asset-detail/app-asset-detail/mocks.yaml

asset:
  url: https://placehold.co/300x648
  width: 648
  height: 300
  alt: alt
title: FIN-Door Flat Frame-Frame 78 Aluminium-Aluminium
details:
  - label: Produktfamilie
    values:
      - Haustüren
  - label: Bautiefe
    values:
      - 78 mm
  - label: Rahmenmaterial
    values:
      - Aluminium-Aluminium
  - label: Aktualität-Freigabe
    values:
      - aktuell
  - label: System
    values:
      - Haustüren
      - FIN-Door
  - label: Sprache
    values:
      - Deutsch
downloads:
  - label: FIN-Door_Flat_Frame-Frame_78_Aluminium-Aluminium_de-DE.pdf
    url: https://example.com
    metadata:
      filesize: 14 MB
      filetype: pdf
    file_icon: doc
  - label: FIN-Door_Flat_Frame-Frame_78_Aluminium-Aluminium_de-DE.pdf
    url: https://example.com
    metadata:
      filesize: 14 MB
      filetype: pdf
    file_icon: pdf
  - label: FIN-Door_Flat_Frame-Frame_78_Aluminium-Aluminium_de-DE.pdf
    url: https://example.com
    metadata:
      filesize: 14 MB
      filetype: pdf
    file_icon: text
back_link: https://example.com
$variants:
  - $name: video
    asset:
      type: video
      url: /build/assets/video/dummy/finstral-snippet-9-16.mp4

// src/components/apps/extranet/asset-detail/app-asset-detail/app-asset-detail.twig

{{ attach_library('finstral_global/apps-app-asset-detail') }}

<div class="AppAssetDetail u-container">
	<div class="AppAssetDetail-main">
		{% include "@apps/extranet/asset-detail/app-asset-detail/viewer/viewer.twig" with {
			height: asset.height,
			type: asset.type,
			url: asset.url,
			width: asset.width,
		} only %}
		<section class="AppAssetDetail-data">
			<h1 class="u-typo-HeadlineM">{{ title }}</h1>

		{% if details %}
			<section class="AppAssetDetail-details">
				<h2 class="u-typo-HeadlineS">{{ "asset_detail.details.heading"|tc }}</h2>
				<dl class="AppAssetDetail-detailsList">
					{% for detail in details %}
						<div>
							<dt class="AppAssetDetail-detailsLabel">{{ detail.label }}</dt>
							{% for value in detail.values %}
								<dd class="AppAssetDetail-detailsValue">{{ value }}</dd>
							{% endfor %}
						</div>
					{% endfor %}
				</dl>
			</section>
		{% endif %}

			<section class="AppAssetDetail-downloads">
				<h2 class="u-typo-HeadlineS">{{ "asset_detail.downloads.heading"|tc }}</h2>
				<ul class="AppAssetDetail-downloadsList">
					{% for file in downloads %}
						<li class="AppAssetDetail-downloadsItem">
							{% include "@elements/icon/icon.twig" with {
								sprite_sheet: "file-icons",
								name: file.file_icon,
								classes: ["AppAssetDetail-downloadsIcon"]
							} only %}
							<span class="AppAssetDetail-downloadsItemLabel">
								<span class="u-typo-TextM">{{ file.label }}</span>
								<span class="AppAssetDetail-downloadsItemMeta">
									<span>{{ file.metadata.filetype }}</span>
									{{ file.metadata.filesize }}
								</span>
							</span>
							{% include "@elements/button/button.twig" with {
								classes: ["AppAssetDetail-downloadLink"],
								label: file.label,
								icon_only: true,
								icon: {name: "download"},
								url: file.url,
							} only %}
						</li>
					{% endfor %}
				</ul>
			</section>
		</section>
	</div>
	{% include "@elements/link/link.twig" with {
		url: back_link,
		label: "asset_detail.back_link.label"|tc,
		icon_name: "arrow_back",
		icon_position: "start",
		icon: true,
		classes: ["AppAssetDetail-backLink"]
	} only %}
</div>