<script lang="ts" src="./page-header"></script>

<template>
	<header
		class="section page-header"
		:class="{
			'has-controls': hasControls,
			'has-spotlight': hasSpotlight,
			'has-nav': hasNav && !hideNav,
			'-cover-auto-height': coverAutoHeight,
		}"
	>
		<section
			class="section page-header-cover fill-darker"
			:class="{
				'has-cover-image': !!coverMediaItem,
				'has-cover-buttons': showCoverButtons,
				'is-editable': coverEditable,
			}"
		>
			<app-editable-overlay
				v-if="coverEditable"
				:class="{ '-cover-img': !!coverMediaItem }"
				:disabled="!coverEditable"
				@click="emitEditCover"
			>
				<span slot="overlay">
					<slot name="cover-edit-buttons" />
				</span>

				<!--
					If no cover media, reserve space with a min-height.
				-->
				<div
					class="fill-gray"
					:style="{
						'min-height': !coverMediaItem ? '200px' : '',
					}"
				>
					<app-media-item-cover
						v-if="!!coverMediaItem"
						:media-item="coverMediaItem"
						:max-height="coverMaxHeight"
						:blur="blurHeader"
					/>
				</div>
			</app-editable-overlay>
			<div v-else-if="!!coverMediaItem" class="-cover-img">
				<app-media-item-cover
					:media-item="coverMediaItem"
					:max-height="coverMaxHeight"
					:blur="blurHeader"
				/>
			</div>

			<div v-if="showCoverButtons" class="page-header-cover-buttons">
				<div class="page-header-cover-buttons-inner">
					<svg class="page-header-cover-buttons-edge -left" viewBox="0 0 10 10">
						<path
							d="
						M0,0
						L10,0
						L10,10
						C5,10 5,0 0,0
						z
					"
						/>
					</svg>
					<svg class="page-header-cover-buttons-edge -right" viewBox="0 0 10 10">
						<path
							d="
						M10,0
						L0,0
						L0,10
						C5,10 5,0 10,0
						z
					"
						/>
					</svg>

					<slot name="cover-buttons" />
				</div>
			</div>

			<div class="container">
				<div class="row">
					<div :class="colClasses">
						<div class="page-header-content">
							<slot />
						</div>
					</div>
				</div>

				<div
					v-if="hasSpotlight"
					class="page-header-spotlight"
					:class="{ dark: spotlightDark }"
				>
					<slot name="spotlight" />
				</div>
			</div>
		</section>

		<app-autoscroll-anchor
			v-if="hasNav && !hideNav"
			:anchor-key="autoscrollAnchorKey"
			:disabled="disableAutoscrollAnchor"
		>
			<app-scroll-affix :disabled="!(shouldAffixNav && Screen.isLg && Screen.height > 750)">
				<section class="section page-header-nav">
					<div class="container">
						<div class="row">
							<div :class="colClasses">
								<div class="-index row">
									<div v-if="hasControls" class="-controls">
										<div class="page-header-controls">
											<slot name="controls" />
										</div>
									</div>
									<div
										class="-nav"
										:class="{
											'col-xs-12': !hasControls,
										}"
									>
										<slot name="nav" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</app-scroll-affix>
		</app-autoscroll-anchor>
	</header>
</template>

<style lang="stylus" src="./page-header.styl" scoped></style>
