{{!< default}}

{{#author}}
  {{> header background=cover_image}}

  {{> hero background=cover_image}}
    <div class="m-hero__content" data-aos="fade-down">
      {{#if profile_image}}
        <div class="m-hero-avatar" style="background-image: url({{profile_image}});"></div>
      {{else}}
        <div class="m-hero-avatar" style="background-image: url({{asset "images/default-avatar-square-normal.jpg"}});"></div>
      {{/if}}
      <h1 class="m-hero-title">{{name}}</h1>
      {{#if bio}}
        <p class="m-hero-description">{{bio}}</p>
      {{/if}}
      <div class="m-hero__meta">
        {{#has any="twitter, facebook, website"}}
          <ul class="m-hero-social">
            {{#if website}}
              <li>
                <a href="{{website}}" target="_blank" rel="noopener">
                  <span class="icon-globe"></span>
                </a>
              </li>
            {{/if}}
            {{#if facebook}}
              <li>
                <a href="https://facebook.com/{{facebook}}" target="_blank" rel="noopener">
                  <span class="icon-facebook"></span>
                </a>
              </li>
            {{/if}}
            {{#if twitter}}
              <li>
                <a href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener">
                  <span class="icon-twitter"></span>
                </a>
              </li>
            {{/if}}
          </ul>
        {{/has}}
        <ul class="m-hero-stats">
          <li>
            {{plural ../pagination.total empty="No posts" singular="% post" plural="% posts"}}
          </li>
          {{#if location}}
            <li>&bull;</li>
            <li>{{location}}</li>
          {{/if}}
        </ul>
      </div>
    </div>
  </header>
{{/author}}

<main role="main">
  <section class="l-content">
    <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
      <section class="l-grid centered">
        {{> "loop"}}
      </section>
    </div>
    {{pagination}}
  </section>
</main>