extends layouts/main
block content

  include components/page-sidebar

  mixin renderBlogPostListItem (post, postIndex = 1, postIndexModulus = 3)
    a(href=`/post/${post.slug}`).uk-display-block.uk-link-reset
      div(uk-grid).uk-grid-small

        div(class={
          'uk-flex-first': ((postIndex % postIndexModulus) === 0),
          'uk-flex-last': ((postIndex % postIndexModulus) !== 0),
        }).uk-width-1-3
          img(src="/img/default-poster.jpg").responsive

        div(class={
          'uk-flex-first': ((postIndex % postIndexModulus) !== 0),
          'uk-flex-last': ((postIndex % postIndexModulus) === 0),
        }).uk-width-2-3
          article.uk-article
            h4(style="line-height: 1;").uk-article-title.uk-margin-remove= post.title
            .uk-text-truncate= post.summary
            .uk-article-meta
              div(uk-grid).uk-grid-small
                .uk-width-auto published: #{moment(post.created).format("MMM DD YYYY HH:MM a")}
                if post.updated
                  .uk-width-auto updated: #{moment(post.updated).format("MMM DD YYYY HH:MM a")}

  .uk-padding
    .uk-container
      //- Main Content Grid
      div(uk-grid)
        //- Main Content Column
        div(class="uk-width-1-1 uk-width-2-3@m")
          section.uk-section.uk-section-default.uk-padding-remove 
            .dtp-border-bottom
              h3.uk-heading-bullet Featured
            //- Featured Block
            .uk-margin
              div(style="position: relative; overflow: hidden; width: 100%; padding-top: 56.25%")
                iframe(
                  src="https://tv.gab.com/channel/mrjoeprich/embed/what-is-just-joe-radio-61ad9b2165a83d20e95a465d",
                  width="960",
                  height="540",
                  style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;",
                )
            //- Blog Posts
            .uk-section.uk-section-default.uk-section-small
              .dtp-border-bottom.uk-margin
                h3.uk-heading-bullet Blog Posts
              
              if Array.isArray(posts) && (posts.length > 0)
                - var postIndex = 1;
                ul.uk-list.uk-list-divider.uk-list-small
                  each post in posts
                    li
                      +renderBlogPostListItem(post, postIndex, 2)
                    - postIndex += 1;
              else
                div There are no posts at this time. Please check back later!

            //- pre= JSON.stringify(gabTvChannel, null, 2)
        
        //- Sidebar
        div(class="uk-width-1-1 uk-width-1-3@m")
          +renderPageSidebar()