<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.status }}</th>
        <th>{{ tableTheme.dates }}</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>{{ work.status }}</td>
        <td>
          <div>
            <small :class="{ grey: work.endDate }">{{ renderDate(work.startDate) }}</small>
          </div>
          <div v-if="work.endDate">
            <small>{{ renderDate(work.endDate) }}</small>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="css">
.grey {
  color: rgba(0,0,0,0.4);
}

</style>
