{{define "confirm" -}}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Confirmation needed</title>
        <link rel="stylesheet" href="/assets/styles.css"/>
        <link rel="stylesheet" href="/assets/bootstrap.min.css">
    </head>
    <body>
    <main className="container mt-5">
        <h1 className="display-4 py-4">Confirmation needed</h1>
        {{ template "flashes" .flashes }}
        <div className="border border-{{ .level }} rounded p-3">
            {{ if .question }}
                <div>
                    <h3 className="text-{{ .level }}">{{ .question }}</h3>
                </div>
            {{ end }}
            <div className="mt-3">
                <p className="fs-4 text">{{ .description }}</p>
            </div>
            <form method="post" action="{{ .action }}">
                {{ if .messages }}
                    <ul>
                        {{range $id, $message := .messages}}
                            <li>
                                {{ $message.MessageId }}
                                <input type="hidden" name="id-{{ $id }}" value="on"/>
                                <input type="hidden" name="mid-{{ $id }}" value="{{ $message.MessageId }}"/>
                                <input type="hidden" name="rh-{{ $id }}" value="{{ $message.ReceiptHandle }}"/>
                            </li>
                        {{end}}
                    </ul>
                {{end}}
                <input type="hidden" name="_csrf" value="{{ .csrf }}"/>
                <a href="{{ .cancelURL }}" className="btn btn-outline-dark btn-lg px-4">{{ .cancel }}</a>
                {{ if .confirm -}}
                    <button className="btn btn-{{ .level }} btn-lg px-5">{{ .confirm }}</button>{{- end }}
            </form>
        </div>
    </main>
    </body>
    <script src="/assets/bootstrap.js"></script>
    </html>
{{end}}