extends includes/layout

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

block head
  title= `${data.author} - EirTube`
  +toast_js()
  script(type="module" src=getStaticURL("html", "/static/js/channel.js"))
  - if (settings.dearrow > 0 && settings.dearrow_preload == 0)
    script const dearrow_thumbnail_instance = "!{settings.dearrow_thumbnail_instance}"
    script(video-class="channel-video" src=getStaticURL("html", "/static/js/dearrow-load.js"))

block content
  main.channel-page
    - const banner = data.authorBanners.slice(-1)[0]
    if banner
      .banner
        img(src=banner.url width=banner.width height=banner.height alt="").banner-image

    .channel-data
      .info
        - const thumbnail = data.authorThumbnails.slice(-1)[0]
        if thumbnail
          .logo
            img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image
        .about
          h1.name= data.author
          if data.autoGenerated
            label.autogenerated Auto-generated by YouTube
          .about-inner
            i= data.second__subCountText
            i= data.videoCountText
            i= data.second__totalViewText
            i= `Joined ${new Date(data.joined * 1000).toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"}) }`
        +subscribe_button(data.authorId, subscribed, `/channel/${data.authorId}`).subscribe-button.base-border-look
      .description!= data.descriptionHtml

    .channel-tabs
      .channel-tabs-header
        each tab in data.tabs
          - const parsedName = (tab == "home" ? "" : tab)
          a(href=`/channel/${data.authorId}/${parsedName}` class={ selected: (parsedName == subpage || (parsedName == "" && !subpage)), header: true })= (tab == "home" ? "latest" : tab)
      .channel-tabs-inner
        if !subpage || (["latest", "videos", "shorts", "streams", "playlists"]).includes(subpage)
          if data.latestVideos.length > 0 && subpage
            .video-sort-header
              .video-sort-padding
              - const sortModes = (subpage == "playlists" ? ["newest", "last_added"] : ["newest", "oldest", "popular"])
              each s in sortModes
                a(href=`/channel/${data.authorId}/${subpage || "videos"}?sort_by=${s}` class={ "selected": url.searchParams.get("sort_by") == s || (!url.searchParams.get("sort_by") && s == sortModes[0]), "video-sort-mode": true })= s.replace("_", " ")
          .videos
            each video in data.latestVideos
              +video_list_item("channel-video", video, { settings: settings })
          if data.continuation
            .continuation-btn.base-border-look
              a(href=`/channel/${data.authorId}/${subpage}?continuation=${data.continuation}${url.searchParams.get("sort_by") ?  `&sort_by=${url.searchParams.get("sort_by")}` : ""}`) More results
          else if data.latestVideos.length == 0
            .no-videos No results
        else
          p TODO

  #toast-container
    each toast in toasts
      +toast(toast.color, toast.icon, toast.text)