@extends('layouts.app')

@section('title', 'Blog')

@section('content')
<div class="pb-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><span>News</span></nav>
  </div>
</div>

<main class="container pb-main">
  <h1 class="sr-only">Our blog</h1>
  <div class="pb-grid" id="blogList" aria-live="polite">@include('partials.blog-cards')</div>
  <div id="blogPager">@include('partials.blog-pager')</div>
</main>
@endsection

@push('scripts')
<script>
// Pagination without a page reload: the next page of articles is fetched as JSON and swapped in.
(function () {
  var list = document.getElementById('blogList'), pager = document.getElementById('blogPager'), busy = false;
  function load(page, push) {
    if (busy) return;
    busy = true;
    list.classList.add('loading');
    fetch(BASE + '/blog?page=' + page, { headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
      .then(function (r) { if (!r.ok) throw new Error('blog ' + r.status); return r.json(); })
      .then(function (j) {
        list.innerHTML = j.html;
        pager.innerHTML = j.pager;
        if (push) history.pushState({ page: j.page }, '', BASE + '/blog' + (j.page > 1 ? '?page=' + j.page : ''));
        window.scrollTo({ top: Math.max(0, list.getBoundingClientRect().top + window.pageYOffset - 130), behavior: 'smooth' });
      })
      .catch(function () { Store.toast('error', 'Could not load the articles. Please try again.'); })
      .then(function () { busy = false; list.classList.remove('loading'); });
  }
  pager.addEventListener('click', function (e) {
    var a = e.target.closest('a[data-page]');
    if (!a || e.ctrlKey || e.metaKey || e.shiftKey) return;
    e.preventDefault();
    load(+a.dataset.page, true);
  });
  window.addEventListener('popstate', function () {
    var m = /[?&]page=(\d+)/.exec(location.search);
    load(m ? +m[1] : 1, false);
  });
})();
</script>
@endpush