<template>
    <div style="padding: 0 10px">
        <h3>Accordion Test</h3>
        <bt-accordion id="ac">
            <bt-accordionpanel id="ac1" title="Panel 1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </bt-accordionpanel>
            <bt-accordionpanel id="ac2" title="Panel 2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Fermentum odio eu feugiat pretium nibh ipsum. Amet commodo nulla facilisi nullam vehicula. Odio eu feugiat pretium nibh ipsum. Pharetra diam sit amet nisl. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Odio ut sem nulla pharetra diam sit. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Eleifend quam adipiscing vitae proin sagittis nisl. Id aliquet lectus proin nibh nisl condimentum id venenatis a. Semper eget duis at tellus at.</p>
                <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-accordionpanel>
            <bt-accordionpanel id="ac3" title="Panel 3">
                <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>
                <p>Urna nec tincidunt praesent semper feugiat nibh sed. Pretium quam vulputate dignissim suspendisse. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Id neque aliquam vestibulum morbi. Risus viverra adipiscing at in tellus integer feugiat. Odio ut sem nulla pharetra diam sit amet. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Sapien eget mi proin sed libero enim sed. Euismod lacinia at quis risus sed vulputate odio. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Tellus in metus vulputate eu scelerisque felis imperdiet. Vulputate mi sit amet mauris commodo. Elementum eu facilisis sed odio morbi quis commodo. Tellus mauris a diam maecenas sed enim.</p>
            </bt-accordionpanel>
            <bt-accordionpanel id="ac4" :title="`Panel 4 (v${counter})`">
                <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>
                <p>Urna nec tincidunt praesent semper feugiat nibh sed. Pretium quam vulputate dignissim suspendisse. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Id neque aliquam vestibulum morbi. Risus viverra adipiscing at in tellus integer feugiat. Odio ut sem nulla pharetra diam sit amet. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Sapien eget mi proin sed libero enim sed. Euismod lacinia at quis risus sed vulputate odio. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Tellus in metus vulputate eu scelerisque felis imperdiet. Vulputate mi sit amet mauris commodo. Elementum eu facilisis sed odio morbi quis commodo. Tellus mauris a diam maecenas sed enim.</p>
            </bt-accordionpanel>
        </bt-accordion>
        <router-link to="/">Back to Home</router-link>
    </div>
</template>

<script>
export default {
    name: 'testaccoridon',
    data () {
        return {
            counter: 0
        }
    },
    mounted () {
        setInterval(() => {
            this.counter++
        }, 5000)
    }
}
</script>