#if($hits.size()==0)
<div class="py-5">
  <p class="library-eyebrow mb-2">Archive</p>
  <h2 class="mb-3" style="font-weight: 500;">No texts found.</h2>
  <p style="color:#6b665c; max-width: 38rem; line-height: 1.8;">
    No writings matched this search. Try another theme, phrase, or return to the archive.
  </p>
</div>
#end

#foreach($post in $hits.getPageOfHits())
<article class="library-result py-5" style="border-bottom: 1px solid rgba(47,51,47,0.08);">

  <div class="row g-4 align-items-start">

    <div class="col-md-9">

      <a href="/${content.blogid}/viewpost.html?id=$post.id" class="text-decoration-none" style="color:#2f332f;">
        <h2 class="mb-2" style="font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;">
          $!post.name
        </h2>
      </a>

      #if($post.publish=="false")
        <div class="mb-2" style="font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9b6b5c;">
          Unpublished
        </div>
      #end

      <div class="mb-3" style="font-size: 0.88rem; color:#7b7468; line-height:1.7;">
        #if($post.blogauthor)
          <span>$!mediaarchive.getUser($post.blogauthor)</span>
        #end
        #if($post.blogauthor && $post.date)
          <span class="mx-2">·</span>
        #end
        #if($post.date)
          <span>$!context.getDate($post.date)</span>
        #end
      </div>

      #if($post.blogintroduction)
        #set($intro=$testbench.clean($post.blogintroduction, 420))
        <div class="mb-4" style="font-size: 1.02rem; line-height: 1.9; color:#4d4942; font-style: italic; max-width: 48rem;">
          $!intro...
        </div>
      #else
        #set($sampletext=$testbench.clean($post.blogposttext, 320))
        <div class="mb-4" style="font-size: 1rem; line-height: 1.9; color:#4d4942; max-width: 48rem;">
          $!sampletext...
        </div>
      #end

      <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
        <a href="/${content.blogid}/viewpost.html?id=$post.id"
           class="text-decoration-none"
           style="font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase; color:#2f332f; font-weight:600;">
          Access the Writing →
        </a>

        #if($post.blogtags)
          <div style="font-size: 0.84rem; color:#8b8478;">
            #foreach($tag in $post.getValues("blogtags"))
              <a href="/${content.blogid}/fieldsearch.html?field=blogtags&blogtags.value=$tag&operation=contains"
                 class="text-decoration-none me-3"
                 style="color:#8b8478;">
                $!tag
              </a>
            #end
          </div>
        #end
      </div>

    </div>

    #if($post.blogfeatureimage)
      #set($featureimage = $mediaarchive.getAsset($post.blogfeatureimage))
      #set($thumb = "$home/${applicationid}/views/modules/asset/downloads/preview/medium/${featureimage.sourcepath}/thumb.jpg" )

      <div class="col-md-3">
        <a href="/${content.blogid}/viewpost.html?id=$post.id" class="d-block text-decoration-none">
          <img src="$thumb" alt="" class="img-fluid" style="border-radius: 0.2rem; opacity: 0.92;">
        </a>
      </div>
    #end

  </div>

</article>
#end

<div class="pt-4">
  $pages.include("/${content.blogid}/pages.html")
</div>