<template>
<div style="padding: 5px 10px;background:#eee;">
    <h4>Normal tabs</h4>
    <bt-tab id="tab1" align="right">
        <bt-tabpane id="tab11" title="Tab 1">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab12" title="Tab 2">
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab13" title="Tab 3">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Tellus cras adipiscing enim eu turpis. Netus et malesuada fames ac turpis egestas. Sed risus pretium quam vulputate dignissim suspendisse in. Accumsan sit amet nulla facilisi morbi. Dictum non consectetur a erat nam. Vitae congue eu consequat ac felis donec et odio. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tortor dignissim convallis aenean et tortor. Luctus accumsan tortor posuere ac ut consequat. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Massa placerat duis ultricies lacus. Eget lorem dolor sed viverra ipsum nunc.</p>
        </bt-tabpane>
    </bt-tab>
    <h4>Vertical Tabs</h4>
    <bt-tab id="tab2" type="vertical" align="right">
        <bt-tabpane id="tab21" title="Tab 1">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab22" title="Tab 2">
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab23" title="Tab 3">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Tellus cras adipiscing enim eu turpis. Netus et malesuada fames ac turpis egestas. Sed risus pretium quam vulputate dignissim suspendisse in. Accumsan sit amet nulla facilisi morbi. Dictum non consectetur a erat nam. Vitae congue eu consequat ac felis donec et odio. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tortor dignissim convallis aenean et tortor. Luctus accumsan tortor posuere ac ut consequat. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Massa placerat duis ultricies lacus. Eget lorem dolor sed viverra ipsum nunc.</p>
        </bt-tabpane>
        <bt-tabpane id="tab24" title="Tab 4">
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
    </bt-tab>
    <h4>Dialog Tabs</h4>
    <bt-tab id="tab2" type="dialog">
        <bt-tabpane id="tab31" :title="`Tab 1 (${counter + 2})`">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab32" :title="`Tab 2 (${counter + 4})`">
            <p>Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nunc scelerisque viverra mauris in aliquam. Viverra suspendisse potenti nullam ac tortor. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Leo in vitae turpis massa sed elementum tempus egestas. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Dui sapien eget mi proin sed. Amet cursus sit amet dictum sit amet justo. Elementum nisi quis eleifend quam adipiscing vitae. Curabitur gravida arcu ac tortor dignissim convallis. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi tempus iaculis urna id volutpat lacus laoreet. Phasellus vestibulum lorem sed risus ultricies tristique. Nullam vehicula ipsum a arcu cursus. Dolor sit amet consectetur adipiscing elit ut aliquam. Quis varius quam quisque id.</p>
        </bt-tabpane>
        <bt-tabpane id="tab33" :title="`Tab 3 (${counter + 6})`" v-if="dynamic">
            <p>Ipsum faucibus vitae aliquet nec ullamcorper sit amet. Velit egestas dui id ornare arcu odio ut sem. Urna nunc id cursus metus aliquam eleifend mi in nulla. Erat pellentesque adipiscing commodo elit at. Lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique. Turpis tincidunt id aliquet risus feugiat. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Volutpat odio facilisis mauris sit amet massa vitae. In hendrerit gravida rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit. Nisi est sit amet facilisis magna etiam. Morbi tempus iaculis urna id volutpat lacus laoreet non. Erat nam at lectus urna duis convallis convallis tellus.</p>
            <p>Tellus cras adipiscing enim eu turpis. Netus et malesuada fames ac turpis egestas. Sed risus pretium quam vulputate dignissim suspendisse in. Accumsan sit amet nulla facilisi morbi. Dictum non consectetur a erat nam. Vitae congue eu consequat ac felis donec et odio. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Tortor dignissim convallis aenean et tortor. Luctus accumsan tortor posuere ac ut consequat. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Massa placerat duis ultricies lacus. Eget lorem dolor sed viverra ipsum nunc.</p>
        </bt-tabpane>
    </bt-tab>
    <router-link to="/">Back to Home</router-link>
</div>
</template>

<script>
export default {
    name: 'TabTester',
    data () {
        return {
            counter: 0,
            dynamic: false
        }
    },
    mounted () {
        setInterval(() => {
            this.counter++
        }, 5000)
        setInterval(() => {
            this.dynamic = !this.dynamic
            console.log('Dynamic toggeled ', this.dynamic)
        }, 3000)
    }
}
</script>
