# AUR0816

## Error Message

`AUR0816: Invalid [default-case] usage. Multiple 'default-case's are not allowed.`

## Description

This error occurs during template compilation/linking when an element using the `switch` attribute has more than one direct child element marked with the `default-case` attribute.

## Cause

The `switch` controller allows for multiple `case` attributes, each matching a specific value. However, it permits only zero or one `default-case` attribute to handle scenarios where none of the specific `case` values match the value bound to `switch`. This error indicates that you have provided more than one `default-case` within the same `switch` block.

## Solution

Ensure that within any given `switch` block, there is at most one element marked with the `default-case` attribute.

1. **Remove Extra `default-case`:** Review the children of the `switch` element and remove all but one `default-case` attribute.
2. **Combine Logic:** If you need complex default logic, place it within a single `default-case` element or `<template default-case>`.
3. **Use `case` Instead:** If a condition was mistakenly marked as `default-case`, change it to a specific `case="someValue"` if appropriate.

## Example

```html
<!-- Assume 'status' is a property on the view model -->

<!-- Incorrect: Multiple default-case elements -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div default-case>Status Unknown</div>
  <p default-case>Please contact support if status is unexpected.</p> <!-- Second default-case -->
</div>

<!-- Correct: Only one default-case element -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <div default-case>
    <p>Status Unknown.</p>
    <p>Please contact support.</p>
  </div>
</div>

<!-- Correct: Using <template> for default case -->
<div switch.bind="status">
  <template case="'active'">
    <span class="status-active">Active</span>
  </template>
  <template default-case>
    <span class="status-unknown">Unknown</span>
  </template>
</div>

<!-- Correct: No default-case (optional) -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <!-- No default case needed -->
</div>
```

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

@customElement({ /* ... */ })
export class MyComponent {
  status = 'pending'; // Example value
}
```

## Debugging Tips

* Carefully review all direct children of the element with the `switch` attribute.
* Count the number of children that have the `default-case` attribute; ensure the count is 0 or 1.
* Check for typos that might have accidentally resulted in multiple `default-case` attributes (e.g., copy-paste errors).

```
```