<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><%= t("set_password.title") %></title>
    <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-light.css" media="(prefers-color-scheme: light)">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-dark.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
    <style>
        body {
            /* Prevent the content from being rendered before the main stylesheet loads */
            display: none;
        }
    </style>
</head>
<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
<div class="container set-password">
    <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto pt-4">
        <h1><%= t("set_password.heading") %></h1>

        <% if (error) { %>
            <div class="alert alert-warning">
                <%= error %>
            </div>
        <% } %>

        <p><%= t("set_password.description") %></p>

        <form action="set-password" method="POST">
            <div class="form-group">
                <label for="password1"><%= t("set_password.password") %></label>
                <div class="controls">
                    <input id="password1" name="password1" placeholder="" class="form-control" type="password" autocomplete="new-password">
                </div>
            </div>
            <div class="form-group">
                <label for="password2"><%= t("set_password.password-confirmation") %></label>
                <div class="controls">
                    <input id="password2" name="password2" placeholder="" class="form-control" type="password" autocomplete="new-password">
                </div>
            </div>

            <div class="form-group">
                <button class="btn btn-success"><%= t("set_password.button") %></button>
            </div>
        </form>
    </div>
</div>

<script src="<%= appPath %>/set_password.js" crossorigin type="module"></script>

</body>
</html>
