{/* media-header.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './media-header.stories.json';
import templateSource from './media-header.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />


<Primary />

## Properties
<Controls />

## Attributes:
* N/A

## Slots:
* `page_breadcrumbs`: Media Header page breadcrumbs.
* `page_title`: Media Header page title.
* `background_media`: Background media (Image, local or remote videos).

<Stories of={comStories} />

### Examples:

#### Example #1: Default use in Varbase Media Header
```
{%
  include 'vartheme_bs5:media-header' with {
    media_type: vmh_media_type|default(''),
    provider: provider|default(''),
    background_media: vmh_background_media|default(''),
    page_breadcrumbs: vmh_page_breadcrumbs|default(''),
    page_title: vmh_page_title|default('')
  }
%}
```

#### Example #2: Page title with custom prefix
```
{%
  include 'vartheme_bs5:media-header' with {
    media_type: '',
    provider: '',
    background_media: '',
    page_breadcrumbs: breadcrumb,
    page_title: 'Custom title prefix -' ~ page_title
  }
%}
```

#### Example #3: Media Header for node with no breadcrumbs
```
{%
  include 'vartheme_bs5:media-header' with {
    media_type: '',
    provider: '',
    background_media: '',
    page_breadcrumbs: '',
    page_title: node.label
  }
%}
```


## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
