<script setup lang="ts">
import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
import { ref } from 'vue';


const xml = ref('');
const query = ref('');

</script>

<template>
    <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
        <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
            <xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
            <xmlInputFieldComponent stylized-name="XQuery" v-model="query"></xmlInputFieldComponent>
        </div>
        <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
    </div>
</template>