<script lang="ts">
  import type { InspectorItem, NoteSourceItem } from '../types';

  export let items: NoteSourceItem[];
  export let onInspect: (item: InspectorItem) => void;

  function inspectItem(item: NoteSourceItem) {
    onInspect({ title: item.title, type: item.kind, description: `${item.source} record in this project.`, properties: [{ label: 'Updated', value: item.updatedAt }, { label: 'Tag', value: item.tag }, { label: 'Source', value: item.source }] });
  }
</script>

<section class="channel-page notes-sources-channel">
  <header class="channel-header"><p>Project reference</p><h1>Notes & Sources</h1></header>
  <div class="file-list">
    {#each items as item}
      <article class="file-row"><span>{item.kind}</span><div><h2>{item.title}</h2><small>{item.source} · {item.updatedAt} · #{item.tag}</small></div><button aria-label={`Inspect ${item.title}`} on:click={() => inspectItem(item)}>Inspect</button></article>
    {/each}
  </div>
</section>
