<!DOCTYPE html>
<html lang="en" class="{{ .cssClass }}">
    <head>
        <link rel="stylesheet" type="text/css" href="css/{{ .cssVersion }}bundle.css">
        {{ template "header.html" . }}
        <title>{{ .strings.passwordReset }} -  jfa-go</title>
    </head>
    <body class="section">
        {{ if .success }}
        <div id="notification-box">
            <span id="copy-notification" class="unfocused">{{ .strings.copied }}</span>
        </div>
        {{ end }}
        <div class="page-container m-2 lg:my-20 lg:mx-64">
            <div class="card ~neutral @low mb-4">
                <span class="heading mb-4">
                {{ if .success }}
                {{ .strings.passwordReset }}
                {{ else }}
                {{ .strings.resetFailed }}
                {{ end }}
                </span>
                <p class="content mb-4">
                {{ if .success }}
                {{ if .ombiEnabled }}
                {{ .strings.youCanLoginOmbi }}
                {{ else }}
                {{ .strings.youCanLogin }}
                {{ end }}
                {{ else }}
                {{ .strings.tryAgain }}
                {{ end }}
                </p>
                {{ if .success }}
                <aside class="aside ~warning">
                    {{ .strings.changeYourPassword }}
                </aside>
                <span class="button ~urge @low w-full text-center text-xl p-1 mt-4" id="pin" title="{{ .strings.copy }}">{{ .pin }}</span>
                {{ end }}
            </div>
            <i class="content">{{ .contactMessage }}</i>
        </div>
        <script src="{{ .urlBase }}/js/pwr-pin.js" type="module"></script>
    </body>
</html>