<script lang="ts">
export default {
  name: 'WorksPage',
  computed: {
    tableTheme() {
      return this.$themeLocale.worksTable ?? {};
    },
  },
}
</script>

<script lang="ts" setup>
import { CHRONOLOGICAL_WORKS } from '../data.ts'
import { renderDate } from '../../../global.ts'
import { work as w } from '../domain'
</script>


<template>
  <table>
    <thead>
      <tr>
        <th>{{ tableTheme.name }}</th>
        <th>{{ tableTheme.description }}</th>
        <th>{{ tableTheme.role }}</th>
        <th>{{ tableTheme.technologies }}</th>
        <th>{{ tableTheme.start }}</th>
        <th>{{ tableTheme.statusOrEnd }}</th>
      </tr>

    </thead>
    <tbody>
      <tr v-for="work in CHRONOLOGICAL_WORKS">
          <td><a rel="nofollow noopener" :href="w.getExternalLink(work)">{{ work.name }}</a></td>
          <td>{{ work.description }}</td>
          <td v-html="work.roles.join(', ')"></td>
          <td>{{ work.technologies.join(', ') }}</td>
          <td>{{ renderDate(work.startDate) }}</td>
          <td>{{ work.endDate ? renderDate(work.endDate) : work.status }}</td>
      </tr>
    </tbody>
  </table>
</template>

