{% extends 'layout.html' %}
{% block content %}

    <v-card class="ma-2 mt-12 w-100 h-100">
        <v-toolbar>
            <v-toolbar-title>Jobs</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn-toggle v-model="status" @update:model-value="refresh({page: 1, itemsPerPage: options.itemsPerPage})" density="compact" variant="outlined" mandatory class="mr-4">
                <v-btn value="">All</v-btn>
                <v-btn value="failed">Failed</v-btn>
                <v-btn value="queued">Queued</v-btn>
                <v-btn value="running">Running</v-btn>
            </v-btn-toggle>
        </v-toolbar>
        <v-card-text>

            <v-data-table-server
                :headers="headers"
                :items="items"
                :items-length="itemsLength"
                :page="options.page"
                :items-per-page="options.itemsPerPage"
                @update:options="refresh"
                hover
            >
                <template v-slot:item.status="{ item }">
                    <v-chip size="small" :color="colors[item.status]">${item.status}</v-chip>
                </template>
                <template v-slot:item.attempts="{ item }">
                    ${item.attempts} / ${item.max_attempts}
                </template>
                <template v-slot:item.details="{ item }">
                    <v-btn size="small" variant="text" color="primary" @click="showDetails(item)">
                        View
                    </v-btn>
                </template>
            </v-data-table-server>

        </v-card-text>
    </v-card>

    <v-dialog v-model="detailsDialog" width="800">
        <v-card v-if="detailsDialog" class="pa-4">
            <v-card-title class="d-flex align-center">
                Job ${current.id}: ${current.name}
                <v-spacer></v-spacer>
                <v-btn icon="ti ti-x" size="small" variant="text" @click="detailsDialog = false"></v-btn>
            </v-card-title>

            <v-card-text>
                <div class="text-title-small mb-2">Payload</div>
                <pre class="pa-4 rounded bg-grey-lighten-4 mb-4"><code>${JSON.stringify(current.payload, null, 2)}</code></pre>
                <template v-if="current.last_error">
                    <div class="text-title-small mb-2">Last error</div>
                    <pre class="pa-4 rounded bg-grey-lighten-4 overflow-auto"><code>${current.last_error}</code></pre>
                </template>
            </v-card-text>
        </v-card>
    </v-dialog>

    <v-snackbar size="small" class="d-flex" v-model="snackBar" rounded="pill" elevation="25">
        ${snackMessage}
        <template v-slot:actions>
            <v-btn @click="snackBar=false" icon="ti ti-x" class="ml-auto" variant="text" size="small"></v-btn>
        </template>
    </v-snackbar>

{% endblock %} {% block js %}

    <script>
        const {createApp} = Vue;
        const {createVuetify} = Vuetify;

        const vuetify = createVuetify(config.vuetifyConfig);

        window.app = createApp({
            mixins: [layoutMixin],
            data() {
                return {
                    snackBar: false,
                    snackMessage: "",
                    items: [],
                    itemsLength: 0,
                    status: "failed",
                    options: {
                        page: 1,
                        itemsPerPage: 25
                    },
                    detailsDialog: false,
                    current: null,
                    colors: {queued: "info", running: "warning", done: "success", failed: "error"},

                    headers: [
                        {title: 'ID', value: 'id', sortable: false},
                        {title: 'Name', value: 'name', sortable: false},
                        {title: 'Status', value: 'status', sortable: false},
                        {title: 'Attempts', value: 'attempts', sortable: false},
                        {title: 'Run after', value: 'run_after', sortable: false},
                        {title: 'Updated', value: 'updated_at', sortable: false},
                        {title: 'Details', value: 'details', sortable: false}
                    ]
                };
            },
            delimiters: config.delimiters,

            methods: {
                showSnack(message) {
                    this.snackMessage = message;
                    this.snackBar = true;
                },

                refresh(options) {
                    if (options) {
                        this.options = {...this.options, page: options.page, itemsPerPage: options.itemsPerPage};
                    }
                    const params = {page: this.options.page, per_page: this.options.itemsPerPage, status: this.status || undefined};
                    axios.get('/api/jobs', {params})
                        .then(res => {
                            this.items = res.data.items;
                            this.itemsLength = res.data.total;
                        })
                        .catch(error => {
                            console.error('Error fetching jobs:', error);
                            this.showSnack('Failed to load jobs');
                        });
                },

                showDetails(item) {
                    this.current = item;
                    this.detailsDialog = true;
                }
            }
        });

        registerStkComponents(app);
        app.use(vuetify).mount("#app");
    </script>
{% endblock %}