<!DOCTYPE HTML>
<html lang="en" th:replace="~{layoutFile :: layout(~{::section})}" xmlns:th="http://www.thymeleaf.org">
<section class="grid">
    <div th:if="${principal != null}">
        <form action="/signout" method="post" class="auth grid__item --start-2 --span-10 space --bottom-m">
            👋 Hey <span th:text="${principal.name}"></span>!
            <button class="auth__signout" type="submit">Sign Out</button>
        </form>
    </div>

    <h1 class="page-title space --top-s">Turbo Native Demo</h1>
    <p class="space --ends-flush">This demo app whose backend is built with the Micronaut Framework will help you get acquainted with the framework.</p>

    <h2 class="actions__header space --top-l">Basic Features</h2>
    <div class="actions grid__item --start-2 --span-10 space --bottom-s">
        <a class="actions__item" href="/one">
            <div class="actions__icon --navigate" aria-hidden="true"></div>
            Navigate to another webpage
        </a>
        <a class="actions__item" href="/slow">
            <div class="actions__icon --slow" aria-hidden="true"></div>
            Open a slow-loading webpage
        </a>
        <a class="actions__item" href="/long">
            <div class="actions__icon --scroll" aria-hidden="true"></div>
            Try Turbo’s scroll restoration
        </a>
        <a class="actions__item" href="/nonexistent">
            <div class="actions__icon --error" aria-hidden="true"></div>
            Hit an HTTP 404 error
        </a>
    </div>

    <h2 class="actions__header space --top-l">Advanced Features</h2>

    <div class="actions grid__item --start-2 --span-10">
        <a class="actions__item" href="/protected">
            <div class="actions__icon --protected" aria-hidden="true"></div>
            Intercept unauthorized access
        </a>
        <a class="actions__item" href="/new">
            <div class="actions__icon --modal" aria-hidden="true"></div>
            Load a webpage modally
        </a>
        <a class="actions__item" href="/numbers">
            <div class="actions__icon --native" aria-hidden="true"></div>
            Intercept with a native view
        </a>
        <a class="actions__item" href="https://turbo.hotwired.dev" target="_blank">
            <div class="actions__icon --external" aria-hidden="true"></div>
            Follow an external link
        </a>
        <a class="actions__item" href="/follow">
            <div class="actions__icon --redirect" aria-hidden="true"></div>
            Follow a redirect
        </a>
        <a class="actions__item" href="/files">
            <div class="actions__icon --files" aria-hidden="true"></div>
            See how files work
        </a>
        <a class="actions__item" href="/reference">
            <div class="actions__icon --reference" aria-hidden="true"></div>
            Reference
        </a>
    </div>
</section>
</html>