{{ with .live_banner }}
{{ if .enable }}
<div class="{{ .section_class }}">
  <h2 class="{{ .title_class }}">{{ .title }}</h2>
  <div class="frontpage-stream-container">
    <!-- twitch -->
    {{ if .use_twitch }}
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed" style="width: 100%;height: 100%;"></div>

    <!-- Load the Twitch embed JavaScript file -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: "100%",
        height: "100%",
        channel: "{{ .twitch_channel }}",
      });
    </script>
    {{ end }}
    <!-- /twitch -->
    {{ if .use_youtube }}
    <div id="youtube-embed" style="width: 100%;height: 100%">
      <iframe width="100%" height="100%"
        src="https://www.youtube.com/embed/live_stream?channel={{ .youtube_channel_id }}" frameborder="0"
        allowfullscreen>
      </iframe>
    </div>

    {{ end }}

    <!-- buttons -->
    {{ $button_global_class := .buttons_class }}
    {{ $buttons_row_class := .buttons_row_class }}
    {{ if .buttons }}
    <div class="col-10 {{ $buttons_row_class }}">
      {{ range $i, $button := .buttons }}
      <a href="{{ $button.link }}" class="{{ $button.class }} {{ $button_global_class }}" title="{{ $button.title }}">{{
        if $button.icon }}<i class="{{ $button.icon }}"></i>{{ end }}{{ if ne $button.icon_only true }}{{ $button.title
        | markdownify }}{{ end }}</a>
      {{ end }}
    </div>
    {{ end }}
    <!-- /buttons -->

  </div>
</div>
{{ end }}
{{ end }}