<template>
    <PopupTemplate :heading="'Logs: ' + pod.metadata?.namespace + '/' + pod.metadata?.name" ref="base">
        <ScrollComponent ref="scrollComponent" v-show="logs && logs.length > 0">
            <div class="console">
                <p class="log" v-for="log, index in logs" :class="{ even: index % 2 }">{{ log }}</p>
            </div>
        </ScrollComponent>
    </PopupTemplate>
</template>

<script setup lang="ts">
import type { Pod } from '~/classes/Pod';
import { getLogs } from '~/requests/logs';

const base = ref();

const logs: Ref<string[] | undefined> = ref(undefined);

const props = defineProps<{
    pod: Pod
}>();

const scrollComponent = ref();

function open()
{
    logs.value = undefined;
    base.value.open();
    getLogs(props.pod.metadata?.uid, (_logs: string[]) => {
        logs.value = _logs;
        scrollComponent.value.scrollToBottom();
    });
}

defineExpose({
    open
})
</script>

<style scoped>
.log {
    width: 100%;
    max-width: 100%;
    word-break: break-all;
    white-space: pre-wrap;
    color: white;
    padding: 0.25rem 1rem;
    line-height: 1.0.5rem;
}
.console {
    background-color: black;
    border-radius: 0.5rem;
    display: grid;
    padding: 1rem 0;
}
.even {
    background-color: rgb(24, 24, 24);
}
</style>