<div class='video-box'>
  <div class='media' id='media-{{ .Params.uuid }}'>
    <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
     href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"
     onclick="loadPlayer(
     '{{ .Params.uuid }}',
    'https://tv.lumbung.space/videos/embed/{{ .Params.uuid }}'
    )">
      <img src="{{.Site.BaseURL}}{{ .File.Dir }}{{ .Params.preview_image }}">
      
      {{ if .Params.is_live}}
      <div class="video-thumbnail-duration-overlay">LIVE</div>
      {{ else }}
      <div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div>
      {{ end }}

      <div class="play-overlay">
        <div class="play-icon"></div>
      </div>
    </span>
  </div>
  <div class='video metadata'>
    <div class='title'>{{ .Title }}</div>
    <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
    <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
    <label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
    <div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
    <div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}
      <ul>
    {{ range (.GetTerms "categories") }}
        <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
    {{ end }}
</ul>
    </div>
  </div>
</div>