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