<script lang="ts" setup>
const {data} = await useFetch("/api/advanced");

const count = ref(0);

function next() {
    if (count.value + 1 < data.value.length) {
        count.value++;
    } else {
        console.log("Ok!");
    }
}
</script>

<template>
    <div>
        <div v-if="data">
            {{ data[count].nr_pytania }}: {{ data[count].pytanie }}
            <!-- {{ data[count].poprawna_odp }} -->
            {{ data[count].odp_a }}
            {{ data[count].odp_b }}
            {{ data[count].odp_c }}
            <div v-if="data[count].media">
                <img :src="'http://localhost:8081/'+data[count].media" alt="" v-if="data[count].media.split('.').at(-1).toLowerCase() == 'jpg'">
                <video controls width="650" v-else-if="data[count].media.split('.').at(-1).toLowerCase() == 'mp4'">
                    <source :src="'http://localhost:8081/'+data[count].media" type="video/mp4" />
                </video>
            </div>
            <div v-else>
                No Media.
            </div>

        </div>
        <button @click="next()">Next</button>
        {{count}}
    </div>
</template>