<script setup>
import { diagnostics, run_diagnostics } from '~/assets/diagnostics';
onMounted(() => {
    run_diagnostics();
});
</script>

<template>
    <div class="vga-font">
        <h1>Diagnostics</h1>
        <ul>
            <li v-for="diagnostic in diagnostics">
                <div v-if="diagnostic.status !== undefined">
                <!-- If diagnostic is warn or err, show text-->
                <!-- Style like SystemD, e.g. [ OK ]: msg -->
                <!-- Colorize the status, as well -->
                <p v-if="diagnostic.status.severity === 'OK'">
                    [ <span class="text-green-500">&nbsp;OK&nbsp;</span> ]: {{ diagnostic.title }} - {{ diagnostic.status.message }}
                </p>
                <p v-else-if="diagnostic.status.severity === 'WARN'">
                    [ <span class="text-yellow">WARN</span> ]: {{ diagnostic.title }} - {{ diagnostic.status.message }}
                </p>
                <p v-else-if="diagnostic.status.severity === 'ERR'">
                    [ <span class="text-red">FAIL</span> ]: {{ diagnostic.title }} - {{ diagnostic.status.message }}
                </p>
                <p v-else-if="diagnostic.status.severity === 'SKIP'">
                    [ <span class="text-mauve">SKIP</span> ]: {{ diagnostic.title }} - {{ diagnostic.status.message }}
                </p>
                <div v-if="diagnostic.steps && diagnostic.steps.length > 0" class="">
                    <ul>
                        <li v-for="(step, stepIndex) in diagnostic.steps" :key="step.name">
                            <div v-if="step.status !== undefined">
                                <!-- Determine if it's the last step in the list -->
                                <p v-if="step.status.severity === 'OK'">
                                    {{ stepIndex === diagnostic.steps.length - 1 ? '└─' : '├─' }}[ <span class="text-green-500">OK</span> ]: {{ step.name }} - {{ step.status.message }}
                                </p>
                                <p v-else-if="step.status.severity === 'WARN'">
                                    {{ stepIndex === diagnostic.steps.length - 1 ? '└─' : '├─' }}[<span class="text-yellow">WARN</span>]: {{ step.name }} - {{ step.status.message }}
                                </p>
                                <p v-else-if="step.status.severity === 'ERR'">
                                    {{ stepIndex === diagnostic.steps.length - 1 ? '└─' : '├─' }}[<span class="text-red">FAIL</span>]: {{ step.name }} - {{ step.status.message }}
                                </p>
                                <p v-else-if="step.status.severity === 'SKIP'">
                                    {{ stepIndex === diagnostic.steps.length - 1 ? '└─' : '├─' }}[<span class="text-mauve">SKIP</span>]: {{ step.name }} - {{ step.status.message }}
                                </p>  
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            </li>
        </ul>
    </div>
</template>
