# AUR0815

## Error Message

`AUR0815: Invalid [case/default-case] usage. The parent [switch] not found; only "*[switch] > *[case|default-case]" relation is supported.`

## Description

This error occurs during template compilation/linking when an element uses a `case` or `default-case` template controller attribute, but it is not a direct child of an element with the `switch` attribute.

## Cause

The `case` and `default-case` attributes are designed to work exclusively as direct children of an element managed by the `switch` attribute. They represent the different conditional branches based on the value bound to `switch`. This error indicates that the required parent-child relationship is missing or broken in the template structure.

Common causes:

1. **Incorrect Nesting:** The element with `case` or `default-case` is not directly nested inside the element with `switch`. There might be intermediate elements, or it might be placed elsewhere entirely.
2. **Missing `switch` Attribute:** The `switch` attribute (e.g., `switch.bind="status"`) is missing from the intended parent element.
3. **Typo:** A typo in `switch`, `case`, or `default-case`.

## Solution

Ensure that any element using `case` or `default-case` is a direct child of the element using the `switch` attribute.

1. **Restructure HTML:** Adjust the HTML structure so that the `case`/`default-case` elements are immediate children of the `switch` element.
2. **Add `switch` Attribute:** Ensure the parent element has the `switch.bind="yourValue"` attribute correctly applied.
3. **Check Spelling:** Verify the spelling of all related attributes (`switch`, `case`, `default-case`).

## Example

```html
<!-- Assume 'user.role' is a property on the view model -->

<!-- Incorrect: 'case'/'default-case' are not direct children -->
<div switch.bind="user.role">
  <div>
    <div case="admin">Admin Controls</div>
    <div case="editor">Editor Tools</div>
    <div default-case>View Only</div>
  </div>
</div>

<!-- Incorrect: Missing 'switch' attribute on parent -->
<div>
  <div case="admin">Admin Controls</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: 'case'/'default-case' are direct children -->
<div switch.bind="user.role">
  <div case="admin">Admin Controls</div>
  <div case="editor">Editor Tools</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: Using <template> as direct children -->
<div switch.bind="user.role">
  <template case="admin">
    <button>Manage Users</button>
  </template>
  <template case="editor">
    <button>Edit Content</button>
  </template>
  <template default-case>
    <p>Welcome, guest!</p>
  </template>
</div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  user = {
    role: 'editor' // Example value
  };

  changeRole(newRole: string) {
    this.user.role = newRole;
  }
}
```

## Debugging Tips

* Carefully inspect the HTML structure in your template around the `switch`, `case`, and `default-case` attributes.
* Verify that there are no intermediate elements between the `switch` element and its `case`/`default-case` children.
* Use the browser's element inspector to check the compiled structure if possible, though this error often happens before rendering.
* Check for typos in the attribute names (`switch`, `case`, `default-case`).
* Ensure the `switch` attribute is correctly bound (e.g., `switch.bind="..."`).