extends ../layouts/main
block content

  include ../channel/components/list-item

  section(style="font: Verdana;").uk-section.uk-section-muted.uk-section-small
    .uk-container
      div(uk-grid).uk-grid-small
        .uk-width-auto
          img(src="/img/default-poster.jpg").uk-width-small
        .uk-width-expand
          h1.uk-margin-remove.uk-padding-remove= category.name
          div= category.description
          div(uk-grid).uk-grid-small
            .uk-width-auto #{category.stats.streamCount} live shows.
            .uk-width-auto #{category.stats.viewerCount} total viewers.

  section.uk-section.uk-section-default
    .uk-container
      if Array.isArray(channels) && (channels.length > 0)
        div(uk-grid).uk-flex-center.uk-grid-small
          each channel in channels
            div(class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-width-1-4@l")
              +renderChannelListItem(channel)
      else
        .uk-text-lead No channels in this category, check back later.
        include ../components/back-button


      //- pre= JSON.stringify(category, null, 2)
      pre= JSON.stringify(category, null, 2)
      pre= JSON.stringify(channels, null, 2)