{{#if loading}}
  <div class="loading-spinner-container align-center"><div class="loading-spinner"></div></div>
{{else}}
  {{#if showComposer}}
    {{twitch-feed/composer
        class="mg-b-2"
        placeholderText=(i18n "Post an update to your channel...")
        createMessage=(action "createPost")
        maxLength=9000
        showCreateActions=true
        liveEmbed=true
        trackingInfo=(create-context trackingInfo)
    }}
  {{/if}}
  {{#if showOnboardingExperience}}
    <div class="brick mg-b-2 pd-r-4 pos-relative">
      <span>{{i18n "Your friends and subscribers can now comment on your posts"}}!</span><br >
      <span>{{t 'general.common.learnMore'}} <a href="http://link.twitch.tv/commentsp" target="_blank" rel="noopener noreferrer">{{i18n "here"}}.</a></span>
      <span>{{i18n "You can enable or disable comments"}} <a href="/settings/channel" target="_blank" rel="noopener noreferrer">{{i18n "here"}}.</a></span>
      <button class="pin-tr button button--icon-only button--secondary" {{action "closeCommentsOnboarding"}}>
        {{svg-icon path="svg/close-small"}}
      </button>
    </div>
  {{/if}}
  {{#if isEmptyFeed}}
    <div class="empty-grid">{{i18n "Nothing is here yet."}}</div>
  {{else}}
    {{#each posts as |post index|}}
      {{twitch-feed/story-card
        post=post
        broadcasterIsLive=broadcasterIsLive
        onOpenPost=onOpenPost
        deleteAction=(action 'deletePost')
        trackingInfo=(create-context trackingInfo feed_index=(plus-one index))
      }}
    {{/each}}
    {{#if loadingMore}}
      <div class="loading-spinner-container"><div class="loading-spinner"></div></div>
    {{else}}
      {{infinite-scroll-slug
        loadMore=(action 'loadMore')
        buffer=500
        isLoading=loadingMore
        contentLength=posts.length
      }}
    {{/if}}
    {{#if feed.isComplete}}
      <div class="activity-list-end">
        <svg class='svg-logo_glitch' height='30px' version='1.1' viewbox='0 0 30 30' width='30px' x='0px' y='0px'>
          <path clip-rule='evenodd' d='M21,9h-2v6h2V9z M5.568,3L4,7v17h5v3h3.886L16,24h5l6-6V3H5.568z M25,16l-4,4h-6l-3,3v-3H8V5h17V16z M16,9h-2v6h2V9z' fill-rule='evenodd'></path>
        </svg>
      </div>
    {{/if}}
  {{/if}}
{{/if}}
