<script setup>
import { Tabs, Tab} from '@components'
import ExcludeElements from '@/settings/ExcludeElements.vue'
import ExcludePosts from '@/settings/ExcludePages.vue'
import ExcludeWooCommerce from '@/settings/ExcludeWooCommerce.vue'
import { useTranslation } from '../../composables/useTranslation'

const { t } = useTranslation()
</script>

<template>
    <Row transparent gap="5">
        <Tabs>
            <Tab id="html"> 
                <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.25 3.75L22.5 9L17.25 14.25M6.75 14.25L1.5 9L6.75 3.75M14.25 0.75L9.75 17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg> 
                {{ t('html_elements') }}</Tab>
            <Tab id="posts"> 
                <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 4.5H11.5M10 7.5H11.5M4 10.5H11.5M4 13.5H11.5M14.5 4.5H17.875C18.4963 4.5 19 5.00368 19 5.625V15C19 16.2426 17.9926 17.25 16.75 17.25M14.5 4.5V15C14.5 16.2426 15.5074 17.25 16.75 17.25M14.5 4.5V1.875C14.5 1.25368 13.9963 0.75 13.375 0.75H2.125C1.50368 0.75 1 1.25368 1 1.875V15C1 16.2426 2.00736 17.25 3.25 17.25H16.75M4 4.5H7V7.5H4V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                 {{ t('pages_posts') }}</Tab>
            <Tab id="woo"> 
                <svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.0495 0.5H2.95053C1.33657 0.5 0 1.8543 0 3.54718V10.6833C0 12.3501 1.31135 13.7305 2.95053 13.7305H13.1437L16.0642 15.4997L15.4605 13.7305H23.0495C24.6634 13.7305 26 12.3762 26 10.6833V3.52113C26 1.8543 24.6634 0.5 23.0495 0.5ZM8.95247 11.8032C8.95247 11.8032 7.56547 9.90197 7.21242 8.46954C6.85936 7.0371 6.80892 7.68821 6.80892 7.68821C6.80892 7.68821 5.69932 10.2666 4.53928 11.9074C3.37924 13.5482 2.79922 11.1 2.79922 11.1C2.39573 10.6052 1.23569 3.31278 1.23569 3.31278C1.89137 1.46364 3.00097 2.9742 3.00097 2.9742L4.13579 8.91229C4.13579 8.91229 5.87585 5.26609 6.43065 4.35455C7.01067 3.41695 7.99418 3.6774 8.06983 4.64103C8.14549 5.60467 9.10378 8.28723 9.10378 8.28723C9.17659 5.6053 10.207 3.04398 10.4418 2.46047L10.4656 2.40123C10.6421 1.95848 12.4326 1.46364 12.1048 3.23464C11.323 5.21401 10.5412 9.40713 10.743 11.699C10.2386 13.444 8.95247 11.8032 8.95247 11.8032ZM16.2153 10.8656C16.1753 10.8853 16.1271 10.9114 16.0715 10.9414C15.3918 11.3089 13.6139 12.2702 12.3317 9.38108C11.4491 6.22973 13.3909 3.91179 13.3909 3.91179C13.3909 3.91179 15.9379 1.67199 17.678 4.64103C19.065 7.89656 16.7449 10.6052 16.2153 10.8656ZM22.6964 10.8656C22.6564 10.8853 22.6082 10.9114 22.5526 10.9414C21.8728 11.3089 20.095 12.2702 18.8128 9.38108C17.9302 6.22973 19.872 3.91179 19.872 3.91179C19.872 3.91179 22.419 1.67199 24.1591 4.64103C25.5461 7.89656 23.226 10.6052 22.6964 10.8656ZM13.8195 7.14409C14.2229 5.11264 15.1056 4.8522 15.5847 4.90428C16.4261 5.36429 16.3933 6.40107 16.3679 7.20259C16.3674 7.21791 16.367 7.23313 16.3665 7.24827C16.3665 8.49839 15.383 9.64433 14.5508 9.38389C14.0969 9.12345 13.8195 8.39421 13.8195 7.14409ZM20.2753 7.14409C20.6788 5.11264 21.5614 4.8522 22.0406 4.90428C22.898 5.37308 22.8728 6.44089 22.8224 7.24827C22.8224 8.49839 21.8389 9.64433 21.0066 9.38389C20.5527 9.12345 20.2753 8.39421 20.2753 7.14409Z" fill="currentColor"/>
                </svg> {{ t('woocommerce') }}
            </Tab>

            <template #html>
                <ExcludeElements />
            </template>
            <template #posts>
                <ExcludePosts />
            </template>
            <template #woo>
                <ExcludeWooCommerce />
            </template>
        </Tabs>
    </Row>
</template>