{! 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>
      {! Cover header !}
      <header
        {?post.image}
          class="cover has-cover {@eq key=pagination.currentPage value=1}is-homepage{/eq}"
          style="background-image: url('{@dynamicImage src=post.image width="2000"/}');"
        {:else}
          class="cover no-cover"
        {/post.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>

      <section class="{@postClass/} body-wrap">
        <h1 class="post-title">{@title editable="true"/}</h1>
        <p class="post-meta">
          {@date date=publishedAt format="LL"/} &middot; {@readingTime/} min read
        </p>

        {! 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>

    <div class="row post-details body-wrap">
      <div class="two-column">
        {! Post tags !}
        {?tags}
          <div class="post-tags">
              {#tags}
                <a href="{@url type="tag" slug=slug/}" class="tag">{name}</a>
              {/tags}
          </div>
        {/tags}
      </div>

      <div class="two-column">
        <div class="post-share">
          {! Share !}
          <a class="share-button share-button-twitter" href="https://twitter.com/intent/tweet?text={title|uc}&amp;url={@url type="post" slug=slug absolute="true"/}">Twitter</a>
          <a class="share-button share-button-facebook" href="https://www.facebook.com/sharer/sharer.php?u={@url type="post" slug=slug absolute="true"/}">Facebook</a>
          <a class="share-button share-button-gp" href="https://plus.google.com/share?url={@url type="post" slug=slug absolute="true"/}">Google+</a>
          <a class="share-button share-button-email" href="mailto:?subject={title|uc}&amp;body=I%20thought%20you%20might%20like%20this%20article%3A%20{@url type="post" slug=slug absolute="true"/}">Email</a>
        </div>
      </div>
    </div>

    {! Switch to the post.author context !}
    {#author}
      <section class="post-author">
        <div class="post-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="post-author-avatar" src="{@dynamicImage src=avatar thumbnail="200"/}" alt="{name}">
            </a>
          {/avatar}

          <p class="post-author-role">Author</p>
          <p class="post-author-name">
            <a href="{@url type="author" username=username/}">
              {author.name}
            </a>
          </p>

          {! Bios are stored as markdown, so we use the |markdownToHtml filter to convert them
            to HTML, then the |s filter so the HTML doesn't get escaped. If you wanted plain-text,
            you could use |markdownToText instead. !}
          <div class="post-author-bio">
            {bio|markdownToHtml|s}
          </div>
        </div>
      </section>
    {/author}

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

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

{/body}