Cat Eye Compact Safety Taillight

Error executing template "Designs/Swift/Paragraph/Just_Comments.cshtml"
System.NullReferenceException: Object reference not set to an instance of an object.
   at CompiledRazorTemplates.Dynamic.RazorEngine_22cdf5adce52420fa524c528af26e5b0.ExecuteAsync()
   at RazorEngine.Templating.TemplateBase.Run(ExecuteContext context, TextWriter reader)
   at RazorEngine.Templating.RazorEngineCore.RunTemplate(ICompiledTemplate template, TextWriter writer, Object model, DynamicViewBag viewBag)
   at RazorEngine.Templating.RazorEngineService.Run(ITemplateKey key, TextWriter writer, Type modelType, Object model, DynamicViewBag viewBag)
   at RazorEngine.Templating.DynamicWrapperService.Run(ITemplateKey key, TextWriter writer, Type modelType, Object model, DynamicViewBag viewBag)
   at RazorEngine.Templating.RazorEngineServiceExtensions.Run(IRazorEngineService service, String name, TextWriter writer, Type modelType, Object model, DynamicViewBag viewBag)
   at RazorEngine.Templating.RazorEngineServiceExtensions.<>c__DisplayClass23_0.<Run>b__0(TextWriter writer)
   at RazorEngine.Templating.RazorEngineServiceExtensions.WithWriter(Action`1 withWriter)
   at RazorEngine.Templating.RazorEngineServiceExtensions.Run(IRazorEngineService service, String name, Type modelType, Object model, DynamicViewBag viewBag)
   at Dynamicweb.Rendering.RazorTemplateRenderingProvider.Render(Template template)
   at Dynamicweb.Rendering.TemplateRenderingService.Render(Template template)
   at Dynamicweb.Rendering.Template.RenderRazorTemplate()


  1     @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Ecommerce.ProductCatalog
@using Dynamicweb.Frontend
@functions {
	public ProductViewModel product { get; set; } = new ProductViewModel();
    public PageInfoViewModel page { get; set; } = new PageInfoViewModel();
}
@{  
	ProductViewModel product = null;
    page = Dynamicweb.Frontend.ContentViewModelFactory.CreatePageInfoViewModel(Pageview.Page);
    Uri currentUrl = Dynamicweb.Context.Current.Request.Url;
 	if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
	{
		product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
	}
	else if (Pageview.Page.Item["DummyProduct"] != null && Pageview.IsVisualEditorMode)
	{
		ProductListViewModel productList = page.Item.GetValue("DummyProduct") != null ? page.Item.GetValue("DummyProduct") as ProductListViewModel : new ProductListViewModel();
		if (productList?.Products is object)
		{
			product = productList.Products[0];
		}
	}
    Dynamicweb.Content.Commenting.CommentFilter filter = new Dynamicweb.Content.Commenting.CommentFilter();
    filter.ItemType = "ecomProduct";
    filter.ItemId = product.Id;
    filter.LanguageId = product.LanguageId;
    Dynamicweb.Content.Commenting.CommentCollection comments = new Dynamicweb.Content.Commenting.CommentService().GetComments(filter);
    var isLoggedIn = Dynamicweb.Security.UserManagement.UserContext.Current.IsLoggedOn;
    var currentUser = Dynamicweb.Security.UserManagement.UserContext.Current.User;
	string theme = !string.IsNullOrWhiteSpace(Model.Item.GetRawValueString("Theme")) ? " theme " + Model.Item.GetRawValueString("Theme").Replace(" ", string.Empty).Trim().ToLower() : string.Empty;
}
<div class="container mb-3">
        <div class="small mb-1">
            @Translate("You can leave a comment here. Please keep it civil and make sure your comments relate to this specific bike. No swear words; racist comments; spam; advertisement; or other inappropriate responses. If you do not comply with this, your comment will be deleted and your account blocked.")
        </div>
        <div class="row">
        @if (isLoggedIn)
        {
            <form method="post" action="@currentUrl" id="commentform">
                <input type="hidden" name="Comment.Command" id="Comment.Command" value="create" />
                <!--Set to false if you want to approve comments before publishing them-->
                <input type="hidden" name="Comment.Active" value="true" />
                <!-- Product comments -->
                <input type="hidden" name="Comment.ItemType" value="ecomProduct" />
                <input type="hidden" name="Comment.ItemId" value="@product.Id" />
                <input type="hidden" name="Comment.LangId" value="@product.LanguageId" />
                <!--Comment.Continue takes an URL to redirect the user to after submitting their comment -->
                <input type="hidden" name="Comment.Continue" value="@currentUrl" />
                <!--Notification email details-->
                <input type="hidden" name="Comment.Notify" value="true" />
                <input type="hidden" name="Comment.NotifyTemplate" value="Comments/Notify.cshtml" />
                <input type="hidden" name="Comment.NotifySubject" id="Comment.NotifySubject" value="New Comment on Mountainbikemuseum: " />
                <input type="hidden" name="Comment.NotifySenderEmail" value="justin@justdynamics.nl" />
                <input type="hidden" name="Comment.NotifySenderName" value="Justin Sjouw" />
                <input type="hidden" name="Comment.NotifyEmail" value="monitoring@techteacher.dev" />
                <!-- Comment Input Fields-->
                <div class="form-group">
                    <label for="Comment.Name">@Translate("Name")</label>
                    <input type="text" class="form-control" name="Comment.Name" id="Comment.Name" value="@currentUser.Name" readonly />
                </div>
                <div class="form-group">
                    <label for="Comment.Email">@Translate("E-mail (Will not be published on the website")</label>
                    <input type="text" class="form-control" name="Comment.Email" id="Comment.Email" value="@currentUser.Email" readonly />
                </div>
                <div class="form-group mt-3">
                    <label for="Comment.Text">@Translate("Your story about this bike") </label>
                    <textarea name="Comment.Text" id="Comment.Text" style="display: none;"></textarea>
                    <div id="editor" class="pell" style="height: auto;"></div>
                </div>
                <input class="btn btn-primary mt-2" type="submit" value="@Translate("Post my Story")" />           
            </form>
        }
        else
        {
            <div class="col-md-12 panel panel-default">
                <div class="text-center"><i></i></div>
                <div class="text-center"><a class="btn btn-primary" href="/Default.aspx?ID=509&GoBackToPage=@currentUrl">@Translate("Sign in to comment")</a></div>
            </div>
        }
    </div>
    @foreach (Dynamicweb.Content.Commenting.Comment comment in comments)
    {
        <div class="card p-3 mt-2">
            <div class="d-flex justify-content-between align-items-center">
                <div class="user d-flex flex-row align-items-center">
                    <img src="https://api.dicebear.com/7.x/initials/svg?seed=@comment.Name" width="30" class="user-img rounded-circle mr-2" alt="avatar">
                    <span class="m-3"><small class="font-weight-bold text-primary">@comment.Name</small></span> 
                </div>
                <div class="text-end">
                    <p class="text-capitalize">@comment.CreatedDate</p>
                </div>
            </div>                
            <div>
                <span><small class="font-weight-bold">@comment.Text</small></span>                    
            </div>
        </div>
    }
</div>
<script src="https://unpkg.com/pell"></script>
<script type="module">
    const editor = pell.init({
    element: document.getElementById('editor'),
    onChange: html => {
        document.getElementById('Comment.Text').textContent = html
    },
    defaultParagraphSeparator: 'div',
    styleWithCSS: true,
    actions: [
        'bold',
        'underline',
        {
        name: 'italic',
        result: () => pell.exec('italic')
        },
        {
        name: 'backColorNone',
        icon: '<div style="color: #000000;">N</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('removeFormat');
            pell.exec('foreColor', '#000000');
            }
        },
        {
        name: 'backColorA',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#147ed9; color: white;">A</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#147ed9');
            pell.exec('foreColor', '#ffffff');
            }
        },
        {
        name: 'backColorB',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#381853; color: white;">B</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#381853');
            pell.exec('foreColor', '#ffffff');
            }
        },
        {
        name: 'backColorC',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#f72680;">C</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#f72680');
            pell.exec('foreColor', '#ffffff');
            }
        },
        {
        name: 'backColorD',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#fc7701;">D</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#fc7701');
            pell.exec('foreColor', '#000000');
            }
        },
        {
        name: 'backColorE',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#f8b002;">E</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#f8b002')
            pell.exec('foreColor', '#000000');
            }        
        },
        {
        name: 'backColorF',
        icon: '<div style="display: inline-block; width: 18px; height: 24px; line-height: 20px; vertical-align: middle; background-color:#fffa22;">F</div>',
        title: 'Highlight Color',
        result: () => {
            pell.exec('backColor', '#fffa22');
            pell.exec('foreColor', '#000000');
            }        
        },
        {
        name: 'image',
        result: () => {
            const url = window.prompt('Enter the image URL including https://')
            try {
               new URL(url); // This will throw an error if the URL is invalid
                pell.exec('insertImage', url)
            } catch (_) {
                alert('Invalid Image URL');
            }
        }
        },
        {
        name: 'link',
        result: () => {
            const url = window.prompt('Enter the link URL including https://')
            try {
               new URL(url); // This will throw an error if the URL is invalid
                pell.exec('createLink', url)
            } catch (_) {
                alert('Invalid Link URL');
            }
        }
        }
    ],
    })
</script>
<script>
    window.onload = function() {
        var links = document.querySelectorAll(".card a");
        links.forEach(function(link) {
            link.target = "_blank";
        });
    }
</script>