<div class="notification-center flex flex--column">
  <div class="notification-center__header clearfix flex__item flex__item--noGrow">
    <div class="flex flex--verticalCenter">
      <h6 class="flex__item flex__item--grow notification-center__header-text">{{t 'general.Twitch.notifications'}}</h6>
      <div class="flex__item flex__item--noGrow">
        <button disabled="{{isMarkAllReadDisabled}}" class="button button--text pd-r-1" {{action 'markAllRead'}}> {{i18n "Mark All as Read"}} </button>
      </div>
    </div>
  </div>
  <div class="notification-center__core flex__item flex__item--grow flex--verticalCenter flex flex--horizontalCenter flex--verticalCenter {{if isEmpty 'notification-center__core--empty'}}">
    {{#if (not isEmpty)}}
      <div class="tse-scroll-content notification-center__content flex flex--column flex--nowrap">
        <div class="flex__item flex__item--noGrow full-width">
          {{#each notifications as |notification|}}
            {{twitch-onsite-notifications/persistent-notification
              notification=notification
              clickNotification=(action clickNotification notification 'center')
              dismiss=(action dismiss notification)
            }}
          {{/each}}
        </div>
        {{#if loadingMore}}
          <div class="flex__item flex__item--grow flex flex--horizontalCenter flex--verticalCenter notification-center__core-end pd-1">
            <div class="flex__item loading-spinner"></div>
          </div>
        {{else}}
          <div class="flex__item flex__item--grow flex flex--horizontalCenter flex--verticalCenter pd-1 notification-center__core-end">
            <div class="flex__item notification-center__core-end-icon pd-0">
              {{partial 'svg/logo-glitch'}}
            </div>
          </div>
        {{/if}}
        {{infinite-scroll-slug
          loadMore=(action 'loadMore')
          buffer=100
          isLoading=loadingMore
          contentLength=notifications.length
        }}
      </div>
    {{else}}
      <div class="pd-y-3">
        {{partial 'svg/onsite-notifications/empty-state'}}
        <span class="pd-t-1"><h5>{{i18n 'Hooray! You\'re in the clear!'}}</h5></span>
      </div>
    {{/if}}
  </div>
  {{#if (gt newNotificationsCount 0)}}
    <div class="notification-center__footer flex__item flex__item--noGrow flex__item--end">
      {{newNotificationsCount}} {{i18n 'New Notifications'}}
    </div>
  {{else}}
    <div class="notification-center__footer notification-center__footer--empty flex__item flex__item--noGrow flex__item--end">
      &nbsp;
    </div>
  {{/if}}
</div>
