{{ define "default" }}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Accès interdit - {{ .Layer.Name }}</title>
    <style>
      html {
        box-sizing: border-box;
        font-size: 16px;
      }

      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ol,
      ul {
        margin: 0;
        padding: 0;
        font-weight: normal;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #f7f7f7;
      }

      #container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        flex-direction: column;
      }

      #card {
        padding: 1.5em 1em;
        border: 1px solid #e0e0e0;
        background-color: white;
        border-radius: 5px;
        box-shadow: 2px 2px #cccccc1c;
        color: #333333 !important;
      }

      .title {
        margin-bottom: 1.2em;
      }

      p {
        margin-bottom: 0.5em;
      }

      .footer {
        font-size: 0.7em;
        margin-top: 2em;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="card">
        <h2 class="title">Accès interdit</h2>
        <p>
          La page à laquelle vous souhaitez accéder vous est actuellement
          interdite.
        </p>
        {{ if .User }}
        <p>
          <small
            ><i
              >Vous êtes actuellement connu comme "<code
                >{{ .User.Subject }}</code
              >".</i
            ></small
          >
        </p>
        {{ end }}
        <p class="footer">
          Propulsé par
          <a href="https://forge.cadoles.com/Cadoles/bouncer">Bouncer</a>.
        </p>
      </div>
    </div>
  </body>
</html>
{{ end }}