<template>
	<div class="header">
		<img class="background" :src="imageUrl">
		<div class="content">
			<NcAvatar :display-name="author"
				:is-no-user="true"
				:url="imageUrl" />
			<div class="infos">
				<h1>{{ title }}</h1>
				<a :href="link" target="_blank">
					{{ author }}
				</a>
			</div>
			<NcAppNavigationNew :text="t('Subscribe')">
				<template #icon>
					<Plus :size="20" />
				</template>
			</NcAppNavigationNew>
		</div>
	</div>
</template>

<script>
import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
import Plus from 'vue-material-design-icons/Plus.vue'

export default {
	name: 'Banner',
	components: {
		NcAvatar,
		NcAppNavigationNew,
		Plus,
	},
	props: {
		author: {
			type: String,
			required: true,
		},
		imageUrl: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
	},
}
</script>

<style scoped>
	.header {
		overflow: hidden;
		position: relative;
	}

	.background {
		filter: blur(.5rem) brightness(50%);
		opacity: 0.4;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.content {
		position: relative;
	}
</style>
