<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="/assets/css/pico.min.css" />
    <link rel="stylesheet" href="/assets/css/pico.colors.min.css" />
    <title>Blitzer</title>
    <style type="text/css">
      .form-append {
        cursor: default !important;
        width: 150px !important;
      }
      .alert {
        border-radius: var(--pico-border-radius);
        padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
        margin: var(--pico-block-spacing-vertical) 0;
      }
      .success {
        background-color: var(--pico-color-jade-650);
        color: var(--pico-color);
      }
      .danger {
        background-color: var(--pico-color-red-650);
        color: var(--pico-color);
      }
    </style>
  </head>

  <body>
    <main class="container">
      <nav>
        <ul>
          <li><strong>CTDO Blitzer</strong></li>
        </ul>
        <ul>
          <li>
            <a href="/test" role="button" class="pico-background-red-500">Test</a>
          </li>
          <li><a href="/" class="contrast">Strafregister</a></li>
          <li><a href="/setup" class="contrast">Setup</a></li>
        </ul>
      </nav>
      {{ if .Msg }}
      <div
      {{ if eq .MsgType "success"}}
      class="alert success"
      {{ end }}
      {{ if eq .MsgType "danger"}}
      class="alert danger"
      {{ end }}
      >
        {{ .Msg }}
      </div>
      {{ end }}
      <h1>Blitzercontrol</h1>