<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/favicon.svg">
    <link href="/static/main.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <title>TFSTATED - {{ .Page.Title }}</title>
  </head>
  <body class="{{ if .Page.LightMode }}light-theme{{ else }}black-theme{{ end }}">
    <header>
      <h6>TFSTATED</h6>
    </header>
    <div id="main">
      <aside>
        {{ if eq .Page.Section "login" }}
        <a href="/login" class="primary">
          <i class="material-symbols-outlined">login</i>
          <span>Login</span>
        </a>
        {{ else }}
        <a href="/states"{{ if eq .Page.Section "states" }} class="primary"{{ end}}>
          <i class="material-symbols-outlined">home_storage</i>
          <span>States</span>
        </a>
        <a href="/settings"{{ if eq .Page.Section "settings" }} class="primary"{{ end}}>
          <i class="material-symbols-outlined">settings</i>
          <span>Settings</span>
        </a>
        <a href="/accounts"{{ if eq .Page.Section "accounts" }} class="primary"{{ end}}>
          <i class="material-symbols-outlined">person</i>
          <span>User Accounts</span>
        </a>
        <hr>
        <a href="/logout">
          <i class="material-symbols-outlined">logout</i>
          <span>Logout</span>
        </a>
        {{ end }}
      </aside>
      <main>
        {{ template "main" . }}
      </main>
    </div>
    <footer>
    </footer>
  </body>
</html>