@{
    var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
}
@using DigitalData.Core.DTO;
@using EnvelopeGenerator.Application.DTOs;
@model EnvelopeReceiverDto;
@{
    ViewData["Title"] = "Dokument unterschreiben";
}
<partial name="_CookieConsentPartial" />
@{
    var envelope = Model.Envelope;
    var document = Model.Envelope?.Documents?.FirstOrDefault();
    var sender = Model.Envelope?.User;
    var pages = document?.Elements?.Select(e => e.Page) ?? Array.Empty<int>();
    var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
                  + (pages.Count() > 1 ? " und " : "") + pages.LastOrDefault();
}
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            <div class="navbar-brand me-auto ms-5 envelope-message">@($"Hallo {Model.Name.TrySanitize(_sanitizer)}, {@envelope?.Message.TrySanitize(_sanitizer)}")</div>
        <div class="col-1  p-0 m-0 me-3 d-flex">
            <img src="~/img/digital_data.svg" alt="...">
        </div>
    </div>
</nav>
<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
    <div class="bg-light p-1">
        <div class="card sender-card mb-3">
            <div class="row g-0">
                <div class="col-1  p-0 m-0 ps-4 mx-auto">
                    <img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
                </div>
                <div class="col p-0 m-0">
                    <div class="card-body p-0 m-0">
                        <h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
                        <p class="card-text p-0 m-0">@($"Sie haben {(pages.Count())} Briefe zu unterschreiben. Bitte prüfen Sie die Seiten {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
                        <p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script nonce="@nonce">
    const collapseNav = () => {
        document.addEventListener('click', function (event) {
            var navbarToggle = document.getElementById('navbarToggleExternalContent');
            var navbarButton = document.querySelector('[data-bs-target="#navbarToggleExternalContent"]');
            var isCollapsed = new bootstrap.Collapse(navbarToggle)._isTransitioning;

            if (!navbarToggle.contains(event.target) && !navbarButton.contains(event.target) && !isCollapsed) {
                new bootstrap.Collapse(navbarToggle).hide();
            }
        });
    }
</script>
@if (ViewData["DocumentBytes"] is byte[] documentBytes)
{
    var settings = new Newtonsoft.Json.JsonSerializerSettings
    {
        ContractResolver = new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver()
    };
    var envelopeReceiverJson = Newtonsoft.Json.JsonConvert.SerializeObject(Model, settings);
    var documentBase64String = Convert.ToBase64String(documentBytes);

    var envelopeKey = ViewData["EnvelopeKey"] as string;

    <script nonce="@nonce">
        var base64String = "@Html.Raw(documentBase64String.TrySanitize(_sanitizer))";
        var byteCharacters = atob(base64String);
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var documentArrayBuffer = byteArray.buffer;

        document.addEventListener("DOMContentLoaded", async () => {
            const app = new App("#app", "@envelopeKey.TrySanitize(_sanitizer)", @Html.Raw(envelopeReceiverJson.TrySanitize(_sanitizer)), documentArrayBuffer, "@ViewData["PSPDFKitLicenseKey"]");
            await app.init();
        })
    </script>
}
<div id='app'></div>