<div class="card" data-category="{{ .Params.category }}">
  {{ with .Params.image }}
    <img src="{{ . }}" alt="{{ $.Title }} cover">
  {{ else }}
    {{ $bgColor := "#546e7a" }}
    {{ if eq .Params.category "Books" }}{{ $bgColor = "#004d40" }}{{ end }}
    {{ if eq .Params.category "Movies" }}{{ $bgColor = "#01579b" }}{{ end }}
    {{ if eq .Params.category "TV Series" }}{{ $bgColor = "#4a148c" }}{{ end }}
    {{ if eq .Params.category "Recipes" }}{{ $bgColor = "#b71c1c" }}{{ end }}
    {{ if eq .Params.category "YouTube" }}{{ $bgColor = "#f44336" }}{{ end }}
    <div class="card-placeholder" style="height:180px;border-radius:16px 16px 0 0;background-color:{{ $bgColor }};display:flex;align-items:center;justify-content:center;color:white;font-weight:500;">
      <div style="text-align:center;padding:20px;">
        <div style="font-size:2rem;margin-bottom:10px;">{{ substr .Title 0 1 }}</div>
        <div>{{ .Title }}</div>
      </div>
    </div>
  {{ end }}
  <div class="card-title">{{ .Title }}</div>
  {{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
  {{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}
  <div class="card-desc">{{ .Params.description }}</div>
  <a class="card-link" href="{{ .RelPermalink }}">View details &#8594;</a>
</div>
