extends includes/layout

include includes/video-list-item
include includes/subscribe-button

block head
  unless error
    title= `${video.title} - CloudTube`
  else
    title Error - CloudTube
  script(type="module" src=getStaticURL("html", "/static/js/player.js"))
  script const data = !{JSON.stringify(video)}

block content
  unless error
    main.video-page
      - const sortedFormatStreams = video.formatStreams.slice().sort((a, b) => b.second__height - a.second__height)
      - const sortedVideoAdaptiveFormats = video.adaptiveFormats.filter(f => f.type.startsWith("video") && f.qualityLabel).sort((a, b) => a.second__order - b.second__order)

      .main-video-section
        .video-container
          - const format = sortedFormatStreams[0]
          if format
            video(controls preload="auto" poster=`/vi/${video.videoId}/maxresdefault.jpg` width=format.second__width height=format.second__height data-itag=format.itag)#video.video
              source(src=format.url+mediaFragment type=format.type)
          else
            video(src="")#video.video
            .stream-notice The server provided no playback streams.

        #current-time-container
        #end-cards-container
        .info
          header.info-main
            h1.title= video.title
            .author
              a(href=`/channel/${video.authorId}`).author-link= `Uploaded by ${video.author}`
          .info-secondary
            - const date = new Date(video.published*1000)
            - const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime())
            div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}`
            div= video.second__viewCountText
            div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar

        audio(preload="auto")#audio
        #live-event-notice
        #audio-loading-display

        .button-container
          +subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look
          //- button.border-look#theatre Theatre
          select(autocomplete="off").border-look#quality-select
            each f in sortedFormatStreams
              option(value=f.itag)= `${f.qualityLabel} ${f.container}`
            each f in sortedVideoAdaptiveFormats
              option(value=f.itag)= `${f.qualityLabel} ${f.container} *`
          //-
            a(href="/subscriptions").border-look
              img(src="/static/images/search.svg" width=17 height=17 alt="").button-icon
              | Search
          //- button.border-look#share Share
          a(href=`https://www.youtube.com/watch?v=${video.videoId}#cloudtube`).border-look YouTube
          a(href=`https://invidio.us/watch?v=${video.videoId}`).border-look Invidious

        .description!= video.descriptionHtml

      aside.related-videos
        h2.related-header Related videos
        each r in video.recommendedVideos
          +video_list_item("related-video", r, instanceOrigin)

  else
    //- error
    main.video-error-page
      h2 Error
      != message
      p: a(href=`https://www.youtube.com/watch?v=${video.videoId}#cloudtube`) Watch on YouTube →