import { Title, Subtitle, Meta, Description, Primary, Stories, Controls, Source } from '@storybook/addon-docs/blocks';
import * as comStories from './hero-slider-container.stories.json';
import templateSource from './hero-slider-container.twig?raw';

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

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

> ### Bootstrap reference
> * [Carousel](https://getbootstrap.com/docs/5.3/components/carousel/)

<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Attributes
* N/A

## Slots
* `slides`: place one or more hero slide items inside the container.

## Examples

### Example #1: Two-slide autoplay carousel
```
{% embed 'vartheme_bs5_educare:hero-slider-container' with {
  transition: 'slide',
  autoplay: true,
  interval_ms: 5000,
  pause_on_hover: true,
  show_indicators: true,
  show_controls: true,
  slider_height: '700',
  controller_color: 'primary'
} only %}
  {% block slides %}
    {{ include('vartheme_bs5_educare:hero-slide', {
      active: true,
      title: 'Build faster with reusable components',
      content: '<p>Create flexible pages using consistent slider patterns.</p>',
      button_text: 'Get started',
      button_url: '#',
      media_position: 'overlay'
    }, with_context = false) }}

    {{ include('vartheme_bs5_educare:hero-slide', {
      active: false,
      title: 'Keep content clean and scalable',
      content: '<p>Use separate slide items while the container handles behavior and navigation.</p>',
      button_text: 'Explore more',
      button_url: '#',
      media_position: 'overlay'
    }, with_context = false) }}
  {% endblock %}
{% endembed %}
```

### Example #2: Fade transition without autoplay
```
{% embed 'vartheme_bs5_educare:hero-slider-container' with {
  transition: 'fade',
  autoplay: false,
  show_indicators: true,
  show_controls: true,
  slider_height: '500',
  controller_color: 'white'
} only %}
  {% block slides %}
    {{ include('vartheme_bs5_educare:hero-slide', {
      active: true,
      title: 'Manual navigation mode',
      content: '<p>Use a fade transition when you want softer visual movement between slides.</p>',
      media_position: 'none',
      background_color: 'bg-dark',
      text_color: 'text-white'
    }, with_context = false) }}
  {% endblock %}
{% endembed %}
```

### Example #3: Fallback state
```
{{ include('vartheme_bs5_educare:hero-slider-container') }}
```

## Source code
<Source code={templateSource} />
