<article class="blog" data-page="blog">

    <header>
      <h2 class="h2 article-title">Posts</h2>
    </header>

    <section class="blog-posts">

      <ul class="blog-posts-list">

        <li class="blog-post-item" *ngFor="let post of model.posts">
          <a [href]="post.postUrl" target="_blank">

            <figure class="blog-banner-box" *ngIf="post.image">
              <img src="{{blogUrl + post.image}}" [alt]="post.title" loading="lazy">
            </figure>

            <div class="blog-content">

              <div class="blog-meta">
                <p class="blog-category" *ngFor="let category of post.categories; index as i">{{post.categories.length - i > 1 ? category + ',' : category}}</p>

                <span class="dot" *ngIf="post.categories.length > 0"></span>

                <time>{{post.createdDate}}</time>
              </div>

              <h3 class="h3 blog-item-title">{{post.title}}</h3>

              <p class="blog-text">
                {{post.description}}
              </p>

            </div>

          </a>
        </li>
      </ul>

    </section>

  </article>