<script setup lang="ts">
import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
import HistoryComponent from '@components/mock/HistoryComponent.vue'
import ManTooltipComponent from '@/components/man/ManTooltipComponent.vue';
import RestMockManComponent from '@/components/man/RestMockManComponent.vue';
import { ref } from 'vue';


const historyVisibility = ref(true);

function setHistoryVisibility(visibility : boolean) {
    historyVisibility.value = !visibility;
}

</script>

<template>
    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-auto overflow-x-hidden h-full">
        <RestMockMessageComponent></RestMockMessageComponent>
        <HistoryComponent :class="{'hidden': !historyVisibility}"></HistoryComponent>
        <ManTooltipComponent @update:visible="setHistoryVisibility">
            <div class="mt-2">
                <a class="tool-button" href="/man/rest-mock">Expand</a>
            </div>
            <RestMockManComponent></RestMockManComponent>
        </ManTooltipComponent>
    </div>
</template>

