{! Use the default layout !}
{>"default"/}

{! This is the body of the page. It will get rendered where {+body/} appears in the layout. !}
{<body}

  {! Switch to the post context !}
  {#post}
    <article class="micro">
      {! Cover header (not photo) !}
      <header
        {?image}
          class="cover has-cover {@eq key=pagination.currentPage value=1}is-homepage{/eq}"
          style="background-image: url('{@dynamicImage src=image width="2000" colorize="75,75,75"/}');"
        {:else}
          class="cover no-cover"
        {/image}
      >
        {! Site logo !}
        {?Settings.logo}
          <a class="cover-logo" href="{@url/}">
            <img src="{@url path=Settings.logo/}" alt="{Settings.title}">
          </a>
        {/Settings.logo}

        {! Navicon !}
        <button class="nav-toggle" type="button" role="button" aria-label="Toggle Navigation">
          <div class="navicon"><span hidden>Menu</span></div>
        </button>
      </header>

      <div class="body-wrap">
        {! The title helper is required and should only appear once on the page. Use it where
          you want the post title to be editable in the editor. !}
        <h1 class="post-title">{@title editable="true"/}</h1>
      </div>

      <section class="{@postClass/} body-wrap">
        {! The content helper is required and should only appear once on the page. Use it where you
          want the post content to be editable in the editor. !}
        {@content editable="true"/}
      </section>
    </article>

    {! Switch to the post.author context !}
    {#author}
      <section class="micro-author">
        <div class="micro-author-body body-wrap">
          {?avatar}
            <a href="{@url type="author" username=username/}">
              {! We use a dynamic image here to make the avatar smaller and optimize load times !}
              <img class="micro-author-avatar" src="{@dynamicImage src=avatar thumbnail="200"/}" alt="{name}">
            </a>
          {/avatar}

          <a href="{@url type="author" username=username/}">
            {author.name} on {@date date=publishedAt format="LLL"/}
          </a>
        </div>
      </section>
    {/author}

    {! Include the suggested posts partial !}
    {>"partials/suggested"/}
  {/post}

  {! Include the footer !}
  {>"partials/footer"/}

{/body}