<!--
    SPDX-FileCopyrightText: 2024 James Zuccon
    SPDX-License-Identifier: MIT
-->
<!--
    This uses HTML syntax as a base with some customizations for handling Vue-Template-specific syntax.
    It uses the following third-party scripts.
    Script:
    - JS (default - no lang attribute)
    - Typescript (lang="ts")
    Style:
    - CSS (default - no lang attribute)
    - SASS (lang="sass")
    - SCSS (lang="scss")
    NOTE: The tests below test attributes before/after the lang="..." attribute as doing this requires pushing a new context.
          In practice, a Vue Template would generally only contain zero or one <template>, <script> or <style> blocks.
-->

<!-- Template without attributes -->
<template>
    <div>
        <!-- Vue event-shorthand should support "@" prefix -->
        <p @click="test">Testing HTML</p>
        <p>{{ someVar }}</p>
        <!-- Important to test this as it is used at root also -->
        <template>
            Nested template tag
        </template>
    </div>
</template>

<!-- Template with attributes -->
<template loneAttribute attribute="value">
    <div>
        <!-- Vue event-shorthand should support "@" prefix -->
        <p @click="test">Testing HTML</p>
        <p>{{ someVar }}</p>
        <!-- Important to test this as it is used at root also -->
        <template>
            Nested template tag
        </template>
    </div>
</template>

<!-- Style without attributes -->
<!-- This references the syntax highlighting file for CSS. -->
<style>
	body {
		font: 100% Helvetica, sans-serif;
		color: #333;
	}
</style>

<!-- Style with attributes -->
<!-- This references the syntax highlighting file for CSS. -->
<style loneAttribute attribute="value">
	body {
		font: 100% Helvetica, sans-serif;
		color: #333;
	}
</style>

<!-- Style lang="sass" without attributes -->
<!-- This references the syntax highlighting file for SASS. -->
<style lang="sass">
	// single-line comment to make sure it's SASS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body
		font: 100% $font-stack
		color: $primary-color
</style>

<!-- Style lang="sass" with attributes -->
<!-- This references the syntax highlighting file for SASS. -->
<style beforeLangLoneAttribute beforeLangAttribute="asd" lang="sass" afterLangLoneAttribute afterLangAttribute="asd">
	// single-line comment to make sure it's SASS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body
		font: 100% $font-stack
		color: $primary-color
</style>

<!-- Style lang="scss" without attributes -->
<!-- This references the syntax highlighting file for SCSS. -->
<style lang="scss">
	// single-line comment to make sure it's SCSS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body {
		font: 100% $font-stack;
		color: $primary-color;
    }
</style>

<!-- Style lang="scss" with attributes -->
<!-- This references the syntax highlighting file for SCSS. -->
<style beforeLangLoneAttribute beforeLangAttribute="asd" lang="scss" afterLangLoneAttribute afterLangAttribute="asd">
	// single-line comment to make sure it's SCSS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body {
		font: 100% $font-stack;
		color: $primary-color;
    }
</style>

<!-- Script without attributes -->
<!-- This references the syntax highlighting file for Javascript. -->
<script>
// Single-line comment
const a = 'abc';
</script>

<!-- Script with attributes -->
<!-- This references the syntax highlighting file for Javascript. -->
<script loneAttribute attribute="value">
// Single-line comment
const a = 'abc';
</script>

<!-- Script lang="ts" without attributes -->
<!-- This references the syntax highlighting file for Typescript. -->
<script lang="ts">
// Single-line comment
const a = 'abc';

// Typescript
interface SomeInterface {
    value: string;
}
</script>

<!-- Script lang="ts" with attributes -->
<!-- This references the syntax highlighting file for Typescript. -->
<script beforeLangLoneAttribute beforeLangAttribute="asd" lang="ts" afterLangLoneAttribute afterLangAttribute="asd">
// Single-line comment
const a = 'abc';

// Typescript
interface SomeInterface {
    value: string;
}
</script>