<script>
  export let id;

  import { _ } from 'svelte-i18n';
  import { getTag } from '$/stores/tag';
  import ErrorBlock from '$/components/error_block/error_block.svelte';
  import Loader from '$/components/loader/loader.svelte';
  import TopicSummary from '$/components/topic_summary/topic_summary.svelte';

  $: store = getTag(id);
  $: tag = $store.data;
</script>

{#if $store.loading}
  <Loader />
{/if}
{#if $store.error}
  <ErrorBlock message={$_('tag.error.unavailable')} />
{/if}
{#if tag}
  <h1>{$_('tag.title')} {tag.id}</h1>
  <ul>
    {#each tag.topics as topic}
      <TopicSummary topic={topic} />
    {/each}
  </ul>
{/if}
