{{define "public/article_browse_item_card"}}
<article class="card border-0 cs-soft-card overflow-hidden cs-soft-card-v2 cs-browse-item-card cs-article-browse-card{{if not .ThumbURL}} cs-article-browse-card--no-thumb{{end}}">
  <div class="row g-0 align-items-stretch">
    {{if .ThumbURL}}
    <div class="col-auto cs-browse-item-thumb-wrap">
      <a href="{{.DetailURL}}" class="cs-browse-item-thumb cs-browse-item-thumb--img cs-browse-item-thumb--lazy cs-article-browse-thumb" aria-label="{{.Title}}">
        <span class="cs-browse-item-thumb__skeleton" aria-hidden="true"></span>
        <img class="cs-browse-item-thumb__img" src="{{.ThumbURL}}" alt="" loading="lazy" decoding="async" width="128" height="96">
      </a>
    </div>
    {{end}}
    <div class="col cs-browse-item-main">
      <div class="card-body cs-browse-item-body py-3 px-3 px-md-4">
        <div class="d-flex justify-content-end gap-2 flex-nowrap align-items-center mb-2 cs-browse-item-badge-row">
          <div class="d-flex flex-nowrap gap-1 align-items-center min-w-0 cs-browse-corner-row">
            {{if .IsRecommend}}
            <span class="badge text-bg-primary cs-corner-badge">{{T "article_card_recommend"}}</span>
            {{end}}
          </div>
          <span class="cs-browse-item-type-pill cs-article-type-pill">{{T "article_browse_type_label"}}</span>
        </div>
        <h2 class="mb-2 cs-browse-item-title">
          <a class="cs-browse-item-title-link" href="{{.DetailURL}}">{{.Title}}</a>
        </h2>
        {{if .Tags}}
        <div class="d-flex flex-wrap gap-1 mb-2 cs-item-tag-row">
          {{range .Tags}}
          <a class="badge rounded-pill text-bg-light border text-decoration-none fw-normal cs-browse-tag-filter" href="{{.URL}}">{{.Tag}}</a>
          {{end}}
        </div>
        {{end}}
        {{if .Author}}
        <div class="cs-browse-item-meta mb-2">
          <span class="cs-browse-meta-chip"><i class="bx bx-user"></i>{{.Author}}</span>
        </div>
        {{end}}
        <p class="text-secondary mb-0 small lh-lg cs-browse-item-intro">{{.Summary}}</p>
        <div class="cs-browse-item-foot border-top border-light-subtle mt-3 pt-2">
          <div class="cs-browse-item-foot__stats d-flex flex-wrap align-items-center gap-2 gap-sm-3">
            <span class="cs-browse-stat"><i class="bx bx-calendar"></i>{{unixDate .PublishedAt}}</span>
            <span class="cs-browse-stat"><i class="bx bx-show"></i>{{.ViewCount}}</span>
            <span class="cs-browse-stat"><i class="bx bx-like" aria-hidden="true"></i>{{.LikeCount}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>
{{end}}