{{define "public/browse_item_card"}}
<article class="card border-0 cs-soft-card overflow-hidden cs-soft-card-v2 cs-browse-item-card">
  <div class="row g-0 align-items-stretch">
    <div class="col-auto cs-browse-item-thumb-wrap">
      {{if .ThumbURL}}
      <a href="{{.DetailURL}}" class="cs-browse-item-thumb cs-browse-item-thumb--img cs-browse-item-thumb--lazy" 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>
      {{else}}
      <div class="cs-browse-item-thumb cs-browse-item-thumb--empty" aria-hidden="true">
        <i class="bx bx-package"></i>
      </div>
      {{end}}
    </div>
    <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 .CornerLabel}}
            {{if .CornerFilterURL}}
            <a href="{{.CornerFilterURL}}" class="badge text-bg-secondary cs-corner-badge text-decoration-none">{{.CornerLabel}}</a>
            {{else}}
            <span class="badge text-bg-secondary cs-corner-badge">{{.CornerLabel}}</span>
            {{end}}
            {{end}}
            {{if .IsPaid}}<span class="badge text-bg-warning text-dark">{{T "badge_paid"}}</span>{{end}}
          </div>
          {{if .ItemTypeFilterURL}}
          <a href="{{.ItemTypeFilterURL}}" class="cs-browse-item-type-pill text-decoration-none">{{.ItemTypeLabel}}</a>
          {{else}}
          <span class="cs-browse-item-type-pill">{{.ItemTypeLabel}}</span>
          {{end}}
        </div>
        <h2 class="mb-2 cs-browse-item-title">
          {{if .DetailURL}}
          <a class="cs-browse-item-title-link" href="{{.DetailURL}}">{{.Title}}<span class="text-muted fw-normal cs-browse-item-title__ver"> v{{.Version}}</span></a>
          {{else}}
          <span class="text-body">{{.Title}}</span><span class="text-muted fw-normal cs-browse-item-title__ver"> v{{.Version}}</span>
          {{end}}
        </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 or .CatChips .LangName .DbChips}}
        <div class="cs-browse-item-meta mb-2">
          {{range .CatChips}}
          {{if .URL}}
          <a href="{{.URL}}" class="cs-browse-meta-chip cs-browse-meta-chip--link"><i class="bx bx-folder"></i>{{.Name}}</a>
          {{else}}
          <span class="cs-browse-meta-chip"><i class="bx bx-folder"></i>{{.Name}}</span>
          {{end}}
          {{end}}
          {{if .LangName}}
          {{if .LangFilterURL}}
          <a href="{{.LangFilterURL}}" class="cs-browse-meta-chip cs-browse-meta-chip--link"><i class="bx bx-code-alt"></i>{{.LangName}}</a>
          {{else}}
          <span class="cs-browse-meta-chip"><i class="bx bx-code-alt"></i>{{.LangName}}</span>
          {{end}}
          {{end}}
          {{range .DbChips}}
          {{if .URL}}
          <a href="{{.URL}}" class="cs-browse-meta-chip cs-browse-meta-chip--link"><i class="bx bx-data"></i>{{.Name}}</a>
          {{else}}
          <span class="cs-browse-meta-chip"><i class="bx bx-data"></i>{{.Name}}</span>
          {{end}}
          {{end}}
        </div>
        {{end}}
        <p class="text-secondary mb-0 small lh-lg cs-browse-item-intro">{{.Intro}}</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-download"></i>{{.DownloadCount}}</span>
            <span class="cs-browse-stat"><i class="bx bx-like" aria-hidden="true"></i>{{.LikeCount}}</span>
            <span class="cs-browse-stat"><i class="bx bx-like bx-hand-dislike-flip" aria-hidden="true"></i>{{.DislikeCount}}</span>
          </div>
          <div class="cs-browse-item-foot__tail d-flex flex-wrap align-items-center justify-content-between gap-2 mt-2">
            <div class="d-flex flex-wrap align-items-center gap-2">
              {{if .IsPaid}}
              <span class="cs-browse-price-pill">
                <span class="cs-browse-price-pill__license">{{.LicenseLabel}}</span>
                <span class="cs-browse-price-pill__money">¥{{.PriceYuan}}</span>
              </span>
              {{else}}
              <span class="cs-browse-stat cs-browse-stat--license">{{.LicenseLabel}}</span>
              {{end}}
            </div>
            <a href="{{.ScreensAnchorURL}}" class="cs-browse-screens-link flex-shrink-0">{{T "browse_link_screens"}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>
{{end}}