<template>
  <div>
    <div class="flex bg-white p-4 text-lg border-b border-gray-300 h-20 items-center">
      <div class="flex-1 font-semibold">{{ trans('Lines') }}</div>
    </div>
    <a-table
      :dataSource="lines"
      :columns="columns"
      :pagination="false"
      rowKey="id"
    >
      <span slot="actions" slot-scope="_, row" class="text-center">
        <a-tooltip :title="trans('Delete')">
          <a-button
            type="danger"
            ghost
            icon="delete"
            @click="() => destroy('lines', row.id)"
          />
        </a-tooltip>
      </span>
    </a-table>
  </div>
</template>

<script>
import columns from "@/data/line-columns";
export default {
  props: ["lines"],

  metaInfo() {
    return {
      title: this.trans('Lines'),
    }
  },

  computed: {
    columns() {
      return columns.map((column) => {
        column.title = this.trans(column.title)
        return column
      });
    }
  },
};
</script>
