<template>
<div style="padding: 5px 10px;">
    <h4>Normal section</h4>
    <bt-section title="Section heading" tooltipDir="bl" helpText="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.">
        <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>
    </bt-section>
    <h4>Closable section</h4>
    <bt-section title="Section heading" heading="h5" closable @toggle="toggleCheck" helpText="Sample help text to be shown">
        <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-section>
    <h4>Inner section</h4>
    <bt-section title="Section heading" heading="h5" class="inner">
        <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-section>
    <h4>Inner section with help</h4>
    <bt-section title="Section heading" heading="h5" class="dialog focused" helpText="Sample help text to be shown">
        <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-section>
    <router-link to="/">Back to Home</router-link>
</div>
</template>

<script>
export default {
	name: 'testSection',
	methods: {
		toggleCheck(d) {
			console.log('Toggled section ', d)
		}
	}
}
</script>
