<script>
  import { locale, t, localized } from '$lib/i18n/store.js';

  export let data;
  $: lang = $locale;
  $: ({ lowStock, movements } = data);
</script>

<h1>{$t('dashboard.title')}</h1>

<h2>{$t('dashboard.low_stock_list')}</h2>
{#if lowStock.length === 0}
  <p class="muted">{$t('common.none')}</p>
{:else}
  <table>
    <thead>
      <tr>
        <th>{$t('parts.name')}</th>
        <th class="num">{$t('parts.quantity_on_hand')}</th>
        <th class="num">{$t('parts.reorder_level')}</th>
      </tr>
    </thead>
    <tbody>
      {#each lowStock as p}
        <tr>
          <td><a href="/parts/{p.id}">{localized(p, 'name', lang)}</a></td>
          <td class="num"><span class="pill low">{p.quantity_on_hand}</span></td>
          <td class="num">{p.reorder_level}</td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}

<h2>{$t('dashboard.recent_movements')}</h2>
{#if movements.length === 0}
  <p class="muted">{$t('movements.no_movements')}</p>
{:else}
  <table>
    <thead>
      <tr>
        <th>{$t('movements.created_at')}</th>
        <th>{$t('movements.type')}</th>
        <th>{$t('parts.name')}</th>
        <th class="num">{$t('movements.quantity')}</th>
      </tr>
    </thead>
    <tbody>
      {#each movements as m}
        <tr>
          <td>{m.created_at}</td>
          <td><span class="pill">{$t('movements.type_' + m.movement_type)}</span></td>
          <td><a href="/parts/{m.part_id}">{localized(m, 'name', lang)}</a></td>
          <td class="num">{m.quantity}</td>
        </tr>
      {/each}
    </tbody>
  </table>
{/if}

