{{ define "queue" }}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Veuillez patienter - {{ .QueueName }}</title>
        <meta http-equiv="refresh" content="{{ .RefreshRate.Seconds }}">
        <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;
            }

            #queue {
              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;
            }

            .text-centered {
              text-align: center;
            }

            .footer {
              font-size: 0.7em;
              margin-top: 2em;
              text-align: right;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="queue">
                <h2 class="title">Un instant s'il vous plaît...</h2>
                <p>Le site auquel vous souhaitez accéder est actuellement surchargé.</p>
                {{ $rank := sub .Rank .MaxSessions }}
                {{ $waiting := sub .CurrentSessions .MaxSessions }}
                <p class="text-centered">
                  <b>Position: {{ $rank }}</b> <em>(sur {{ $waiting }} en attente)</em>
                </p>
                <p class="text-centered"><em>Cette page se rafraîchira automatiquement lorsqu'une place sera disponible.</em></p>
                <p class="footer">Propulsé par <a href="https://forge.cadoles.com/Cadoles/bouncer">Bouncer</a>.</p>
            </div>
        </div>
    </body>
</html>
{{ end }}