{% stories MediaHeader with {
  "title": "Organisms/Media Header",
  "parameters": {
    "componentSubtitle": "Media Header Component",
    "docs": {
      "description": {
        "component": "The universal media header style on top of web pages."
      },
      "story": {
        "inline": true,
        "iframeHeight": 400
      }
    }
  },
  "argTypes": {
    "media_type": {
      "name": "Media type",
      "description": "Media entity type.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none -'": "",
        "Image": "image",
        "'Local Video'": "video",
        "'Remote Video'": "remote_video"
      }
    },
    "provider": {
      "name": "Provider",
      "description": "Video provider (for remote video).",
      "control": "select",
      "defaultValue": "",
      "options": {
        "'- empty -'": "",
        "Youtube": "youtube",
        "Vimeo": "vimeo"
      }
    },
    "media_header_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the media header.",
      "control": "object",
      "defaultValue": {}
    },
    "page_breadcrumbs": {
      "name": "Media Header page breadcrumbs",
      "description": "System Page breadcrumbs.",
      "defaultValue": "",
      "control": "text"
    },
    "page_title": {
      "name": "Media Header page title",
      "description": "title System page title",
      "defaultValue": "",
      "control": "text"
    },
    "background_media": {
      "name": "Background Media",
      "description": "Background media (Image, local or remote videos).",
      "defaultValue": "",
      "control": "text"
    }
  }
} %}


{% story MediaHeader with {
  "name": "Media Header",
  "args": {
    "media_type": "",
    "provider": "",
    "media_header_utility_classes": [],
    "page_breadcrumbs": "<nav data-component-id=\"vartheme_bs5:breadcrumb\"><ol class=\"breadcrumb bg-light py-2 px-3 my-2\"><li class=\"breadcrumb-item\"><a href=\"/\">Home</a></li></ol></nav>",
    "page_title": "Test Title",
    "background_media": ""
  }
} %}
{{ include('vartheme_bs5:media-header') }}
{% endstory %}


{% story MediaHeaderImage with {
  "name": "Media Header - Image",
  "args": {
    "media_type": "image",
    "provider": "",
    "media_header_utility_classes": [],
    "page_breadcrumbs": "",
    "page_title": "Test Title with Background Image",
    "background_media": "<div class=\"field field--name-field-media-image field--type-image\"><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></div>"
  }
} %}
{{ include('vartheme_bs5:media-header') }}
{% endstory %}


{% story MediaHeaderVideo with {
  "name": "Media Header - Video",
  "args": {
    "media_type": "video",
    "provider": "",
    "media_header_utility_classes": [],
    "page_breadcrumbs": "",
    "page_title": "Test Title with Background Video",
    "background_media": "<div class=\"varbase-video-player ratio ratio-16x9\"><video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" width=\"1600\" height=\"900\"><source src=\"https://github.com/Vardot/varbase_media_demo/raw/10.0.0/content/file/business-meeting.mp4\" type=\"video/mp4\"></video></div>"
  }
} %}
{{ include('vartheme_bs5:media-header') }}
{% endstory %}


{% story MediaHeaderYoutube with {
  "name": "Media Header - Youtube",
  "args": {
    "media_type": "remote_video",
    "provider": "youtube",
    "media_header_utility_classes": [],
    "page_breadcrumbs": "",
    "page_title": "Test Title with Youtube Video",
    "background_media": "<div class=\"varbase-video-player ratio ratio-16x9\"><iframe src=\"https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1\" frameborder=\"0\" allowtransparency=\"\" width=\"1600\" height=\"900\" loading=\"lazy\" ></iframe></div>"
  }
} %}
{{ include('vartheme_bs5:media-header') }}
{% endstory %}


{% story MediaHeaderVimeo with {
  "name": "Media Header - Vimeo",
  "args": {
    "media_type": "remote_video",
    "provider": "vimeo",
    "media_header_utility_classes": [],
    "page_breadcrumbs": "",
    "page_title": "Test Title with Vimeo Video",
    "background_media": "<div class=\"varbase-video-player ratio ratio-16x9\"><iframe src=\"https://player.vimeo.com/video/76979871?autoplay=1&background=1\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"\" allowtransparency=\"\" width=\"1600\" height=\"900\" loading=\"lazy\"></iframe></div>"
  }
} %}
{{ include('vartheme_bs5:media-header') }}
{% endstory %}


{% endstories %}