hrynco-notification-service/HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml

@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels

@model EmailTemplateEditViewModel
@{
    Layout = "~/Views/Shared/_EditorLayout.cshtml";
    ViewData["Title"] = Model.PageTitle;
    ViewData["EditorTitle"] = Model.PageTitle;

    var active = Math.Clamp(Model.ActiveLanguageIndex, 0, Math.Max(0, Model.Languages.Count - 1));
}
@section Breadcrumbs {
    <nav aria-label="Breadcrumb" class="template-editor-breadcrumbs"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="/admin/services/@Model.ServiceId">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">@Model.PageTitle</li></ol></nav>
}
<form id="templateForm" asp-action="Save" asp-controller="AdminTemplates" asp-route-serviceId="@Model.ServiceId" method="post">
    @Html.AntiForgeryToken()
    <input asp-for="Id" type="hidden" />
    <input asp-for="Revision" type="hidden" />
    <input asp-for="ServiceId" type="hidden" /><input asp-for="ServiceName" type="hidden" />
    <input asp-for="KeyFilter" type="hidden" />
    <input type="hidden" id="ActiveLanguageIndex" name="ActiveLanguageIndex" value="@active" />
    <div asp-validation-summary="All" class="text-danger mb-3" role="alert"></div>
    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <dl class="template-service-context">
                <dt>Service</dt>
                <dd>@Model.ServiceName</dd>
            </dl>
            <div class="form-text"><a href="/admin/services/@Model.ServiceId/edit" class="template-service-edit-link">Edit Service and language codes</a></div>
        </div>
        <div class="col-md-6">
            <label asp-for="Key" class="form-label fw-semibold">Template Key</label>
            <input asp-for="Key" class="form-control" readonly="@(!Model.IsNew || Model.LockKey)" />
        </div>
    </div>
    <partial name="_TemplateChannelNavigation" model="@(new TemplateChannelNavigationViewModel { ServiceId = Model.ServiceId, Key = Model.Key, KeyFilter = Model.KeyFilter })" />
    <div class="mb-3">
        <label asp-for="VariablesJson" class="form-label fw-semibold">Shared variables (JSON)</label>
        <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="14"></textarea>
        <div class="form-text">Email variables, shared across its languages: <code>[{"name":"UserName","required":true}]</code></div>
    </div>
    <p class="text-muted">Every configured service language has a tab. Present and Missing show saved versions. Leave all three content fields blank for an unused language; clear them to remove an existing version. Shared variables and the template remain.</p>
    @if (Model.Languages.Count == 0) { <p>No service languages configured. You can save the key and shared variables now, then add language codes in Edit Service.</p> }
    <div class="template-language-sheet mb-3" hidden="@(Model.Languages.Count == 0)">
        <div class="nav nav-tabs" role="tablist" aria-label="Template languages" id="languageTabs">
            @for (var i = 0; i < Model.Languages.Count; i++)
            {
                var language = Model.Languages[i];
                <button type="button" role="tab" id="language-tab-@i" aria-controls="language-pane-@i"
                        aria-selected="@(i == active ? "true" : "false")" tabindex="@(i == active ? 0 : -1)"
                        class="nav-link @(i == active ? "active" : "")" data-pane="language-pane-@i">
                    <span>@language.LanguageCode</span>
                    <span class="template-language-status @(language.IsPresent ? "template-language-present" : "template-language-missing")">@(language.IsPresent ? "Present" : "Missing")</span>
                </button>
            }
        </div>
        <div id="languagePanes">
            @for (var i = 0; i < Model.Languages.Count; i++)
            {
                <section class="language-pane" id="language-pane-@i" role="tabpanel" aria-labelledby="language-tab-@i" hidden="@(i != active)">
                    <input asp-for="Languages[i].LanguageCode" type="hidden" class="language-code" />
                    <div class="mb-3">
                        <label asp-for="Languages[i].Subject" class="form-label fw-semibold">Subject</label>
                        <input asp-for="Languages[i].Subject" class="form-control" data-content="subject" />
                    </div>
                    <div class="mb-3">
                        <label asp-for="Languages[i].HtmlBody" class="form-label fw-semibold">HTML Body</label>
                        <textarea asp-for="Languages[i].HtmlBody" class="form-control font-monospace" rows="15" data-content="html"></textarea>
                    </div>
                    <div class="mb-3">
                        <label asp-for="Languages[i].TextBody" class="form-label fw-semibold">Text Body</label>
                        <textarea asp-for="Languages[i].TextBody" class="form-control font-monospace" rows="8" data-content="text"></textarea>
                    </div>
                </section>
            }
        </div>
    </div>
    <div class="template-preview-panel mb-3">
        <div class="template-preview-panel-header">
            <div>
                <div class="template-preview-title">Selected language preview: <span id="previewLanguage"></span></div>
                <div class="template-preview-subtitle">Sample values use the shared contract. External content is blocked in this preview.</div>
            </div>
            <span id="previewStatus" class="badge text-bg-secondary" role="status">Ready</span>
        </div>
        <div class="template-preview-body">
            <div class="template-preview-source template-preview-section-block">
                <div class="template-preview-section-title">Sample values</div>
                <div id="previewVariables" class="template-preview-variables"></div>
            </div>
            <div class="template-preview-output">
                <div class="template-preview-section-title">Rendered subject</div>
                <div id="previewSubject" class="template-preview-subject"></div>
                <div class="template-preview-section-title mt-3">Rendered HTML</div>
                <iframe id="previewHtmlFrame" class="template-preview-frame" sandbox="allow-same-origin" referrerpolicy="no-referrer" title="Email HTML preview"></iframe>
                <div class="template-preview-section-title mt-3">Rendered text</div>
                <pre id="previewText" class="template-preview-text mb-0"></pre>
            </div>
        </div>
    </div>
</form>
@section FormActions {
    <button type="submit" form="templateForm" class="btn btn-primary"><i class="bi bi-floppy me-1"></i> Save</button>
    <a id="cancelTemplate" href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })" class="btn btn-secondary">Cancel</a>
}
@section Scripts {
    <script src="~/js/template-channel-navigation.js" asp-append-version="true"></script>
    <script src="~/js/email-template-preview.js" asp-append-version="true"></script>
    <script src="~/js/email-template-editor.js" asp-append-version="true"></script>
}