<template lang="pug">
BaseContentBlock
	template(v-slot:top)
		slot(name="top")
			h2.h6.mb-2(v-html="title")

	template(v-slot:default)
		slot
			.small.my-3(v-html="content")

	template(v-slot:bottom)
		slot(name="bottom")
			Button(
				tag="a"
				:href="link"
				isTextOnly
				v-if="!!link"
				download
			)
				|Download

	template(v-slot:right)
		slot(name="right")
			.flex-0-1-auto.flex.items-center
				img.object-cover.md-ml-8.w-full(
					:src="imageSrc"
					:alt="imageAltText"
				)

</template>

<script>
import BaseContentBlock from '@/components/BaseContentBlock'
export default {
	components: {
		BaseContentBlock,
		Icon: () => import(/* webpackChunkName: "Icon" */ '@/components/Icon'),
	},
	props: {
		/** A relevant image for the download file is displayed on the component right.
		 */
		imageSrc: {
			type: String,
			default: '',
		},
		/** Image alt text.
		 */
		imageAltText: {
			type: String,
			default: '',
		},
		/** Title of the component.
		 */
		title: {
			type: String,
			default: '',
		},
		/** Content of the component.
		 */
		content: {
			type: String,
			default: '',
		},
		/** Link to the downloadable content.
		 */
		link: {
			type: String,
			default: '',
		},
	},
}
</script>

<docs>
```jsx

<DocumentLink
    imageSrc="images/music-image.jpg"
	imageAltText="Alternate text"
    title="Document title"
    content="Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    link="#"
>
</DocumentLink>

<hr>

<!-- With correct icon (styleguide only) -->

<DocumentLink
    imageSrc="images/music-image.jpg"
	imageAltText="Alternate text"
    title="Document title"
    content="Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    link="#"
>
<template v-slot:bottom>
	<Button tag="a" href="#" isTextOnly download>
		Download
		<template v-slot:icon-element>
			<Icon name="chevron-right24" path="/spritemap.svg" />
		</template>
	</Button>
</template>
</DocumentLink>
```
</docs>
