1<script>
 2  import { t } from './i18n.js';
 3  let { item } = $props();
 4  let failed = $state(false);
 5</script>
 6<div class="poster-block">
 7  <div class="poster">
 8    {#if item.poster && !failed}
 9      <img src={item.poster} alt={t("Poster for {title}", { title: item.title })} onerror={() => failed = true} loading="lazy" />
10    {:else}
11      <div class="poster-fallback" aria-label={t("Poster unavailable")}><span>▶</span><small>{item.title}</small></div>
12    {/if}
13  </div>
14  {#if item.posterSource}<a class="poster-credit" href={item.posterSource} target="_blank" rel="noreferrer">{t("TVmaze")}</a>{/if}
15</div>
16
17<style>
18  .poster-block { flex: none; }
19  .poster-credit { display: block; width: fit-content; font-size: 9px; line-height: 1.5; margin-top: 4px; }
20</style>