# AUR0810

## Error Message

`AUR0810: Invalid [else] usage, it should follow an [if]`

## Description

This error occurs during template linking when Aurelia encounters an element with an `else` custom attribute, but the immediately preceding element sibling in the DOM (after template compilation) does not have an `if.bind` attribute or another `else` attribute. The `else` attribute must directly follow an `if` or another `else` to form a conditional chain.

## Cause

1. **Incorrect Placement:** The element with the `else` attribute is not placed immediately after the element with the corresponding `if.bind` or `else` attribute in the HTML template. There might be other elements, comments (that aren't removed during compilation), or significant whitespace between them.
2. **Missing `if.bind`:** The preceding element, which was intended to be the start of the conditional block, is missing the `if.bind` attribute.
3. **Template Manipulation:** Manual manipulation of the DOM or compiled template structure before or during linking might disrupt the expected `if`/`else` sequence.
4. **Syntax Error:** A simple typo or syntax error in the template might lead to the `else` being misinterpreted or misplaced relative to the `if`.

## Solution

1. **Verify Placement:** Ensure the element with the `else` attribute is the immediate sibling following the element with `if.bind` or a preceding `else`. Remove any intervening elements, comments, or excessive whitespace that might interfere. Remember that Aurelia operates on the structure *after* template compilation, so whitespace handling by the browser or compiler can sometimes play a role, though typically direct element adjacency is required.
2. **Add `if.bind`:** If the preceding element is missing `if.bind`, add it with the appropriate condition.
3. **Check Template Structure:** Review the HTML template carefully around the `if`/`else` block for any structural issues or typos.

## Example

```html
<!-- Correct Structure -->
<div if.bind="condition">Show if true</div>
<div else>Show if false</div>

<!-- Incorrect: Intervening element -->
<div if.bind="condition">Show if true</div>
<p>Some other text</p> <!-- This <p> breaks the chain -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: Missing if.bind on the first div -->
<div>Show if true?</div> <!-- Missing if.bind -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: else not immediately following -->
<template>
  <div if.bind="condition">Show if true</div>
</template>
<!-- Some other unrelated element or structure -->
<div else>Show if false</div> <!-- AUR0810 Error: 'else' is not linked to the 'if' -->
```

## Debugging Tips

* Carefully inspect the HTML source template around the `if` and `else` elements. Pay close attention to the direct sibling relationship.
* Use the browser's developer tools ("Inspect Element") to look at the DOM structure *after* Aurelia has processed the template. Verify that the element with `else` directly follows the element with `if` (or a previous `else`) in the rendered DOM structure just before the error occurs (this might require stepping through the linking process or examining the structure just before the error is thrown).
* Temporarily remove the `else` block and ensure the `if` block works correctly on its own.
* Simplify the content within the `if` and `else` blocks to basic text to rule out complex content interfering with the structure detection.

```
```