// CURRENTLY NOT IN USE
<template>
    <div class="accompanying-course-work">
        <div class="alert alert-light">
            {{ $t("my_works.description") }}
        </div>
        <span v-if="noResults" class="chill-no-data-statement">{{
            $t("no_data")
        }}</span>
        <tab-table v-else>
            <template #thead>
                <th scope="col">
                    {{ $t("StartDate") }}
                </th>
                <th scope="col">
                    {{ $t("SocialAction") }}
                </th>
                <th scope="col">
                    {{ $t("concerned_persons") }}
                </th>
                <th scope="col" />
            </template>
            <template #tbody>
                <tr v-for="(w, i) in works.results" :key="`works-${i}`">
                    <td>{{ $d(w.startDate.datetime, "short") }}</td>
                    <td>
                        <span class="chill-entity entity-social-issue">
                            <span class="badge bg-chill-l-gray text-dark">
                                {{ w.socialAction.issue.text }}
                            </span>
                        </span>
                        <h4 class="badge-title">
                            <span class="title_label" />
                            <span class="title_action">
                                {{ w.socialAction.text }}
                            </span>
                        </h4>
                    </td>
                    <td>
                        <span
                            v-for="person in w.persons"
                            class="me-1"
                            :key="person.id"
                        >
                            <on-the-fly
                                :type="person.type"
                                :id="person.id"
                                :button-text="person.textAge"
                                :display-badge="'true' === 'true'"
                                action="show"
                            />
                        </span>
                    </td>
                    <td>
                        <div
                            class="btn-group-vertical"
                            role="group"
                            aria-label="Actions"
                        >
                            <a class="btn btn-sm btn-update" :href="getUrl(w)">
                                {{
                                    $t("show_entity", {
                                        entity: $t("the_action"),
                                    })
                                }}
                            </a>
                            <a
                                class="btn btn-sm btn-show"
                                :href="getUrl(w.accompanyingPeriod)"
                            >
                                {{
                                    $t("show_entity", {
                                        entity: $t("the_course"),
                                    })
                                }}
                            </a>
                        </div>
                    </td>
                </tr>
            </template>
        </tab-table>
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";

export default {
    name: "MyWorks",
    components: {
        TabTable,
        OnTheFly,
    },
    computed: {
        ...mapState(["works"]),
        ...mapGetters(["isWorksLoaded"]),
        noResults() {
            if (!this.isWorksLoaded) {
                return false;
            } else {
                return this.works.count === 0;
            }
        },
    },
    methods: {
        getUrl(e) {
            switch (e.type) {
                case "accompanying_period_work":
                    return `/fr/person/accompanying-period/work/${e.id}/edit`;
                case "accompanying_period":
                    return `/fr/parcours/${e.id}`;
                default:
                    throw "entity type unknown";
            }
        },
    },
};
</script>

<style scoped></style>