{{define "frontend_theme_boot"}}
{{/* Apply saved light/dark + accent color before first paint. */}}
<script>
(function () {
  try {
    var t = localStorage.getItem('theme') || localStorage.getItem('dv-theme');
    if (t !== 'dark' && t !== 'light') t = 'light';
    document.documentElement.setAttribute('data-theme', t);
  } catch (e) {}
  var colorCustom = {{json .ThemeColorCustom}};
  var color = {{json .ThemeColor}};
  if (colorCustom) {
    document.documentElement.setAttribute('data-color', 'custom');
  } else if (typeof color === 'string' && color) {
    document.documentElement.setAttribute('data-color', color);
  }
  var coverStyle = {{json .CoverStyle}};
  if (typeof coverStyle === 'string' && coverStyle) {
    document.documentElement.setAttribute('data-cover-style', coverStyle);
  }
})();
</script>
{{if .ThemeColorCustom}}
<style>
html[data-color="custom"] {
  --dv-accent: {{.ThemeAccent.Accent}};
  --dv-accent-hover: {{.ThemeAccent.AccentHover}};
  --primary-color: {{.ThemeAccent.Primary}};
  --primary-dark: {{.ThemeAccent.PrimaryDark}};
  --primary-light: {{.ThemeAccent.PrimaryLight}};
  --primary-rgb: {{.ThemeAccent.RGB}};
}
html[data-theme="dark"][data-color="custom"] {
  --dv-accent: {{.ThemeAccent.DarkAccent}};
  --dv-accent-hover: {{.ThemeAccent.DarkHover}};
}
</style>
{{end}}
<style>
html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0f172a;
}
html[data-theme="dark"] body {
  background-color: #0f172a;
  color: #f3f4f6;
}
</style>
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/bootstrap.min.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/icons.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/theme.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/style.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/header.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset "/static/css/lang-switcher.css"}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/footer.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/portal.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/theme-colors.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/cover-styles.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/portal-pages.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/site-pages.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/portal-search.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset (printf "%s/assets/css/modal.css" .FrontendTplDir)}}">
<link rel="stylesheet" href="{{asset "/static/css/dv-lazy.css"}}">
<script src="{{asset "/static/js/jquery.min.js"}}"></script>
{{end}}

{{define "frontend_top_nav"}}
{{if .NavPublicAnnouncements}}
<div class="dv-top-announce-strip" role="region" aria-label="{{T "announcements.top_strip_aria"}}">
  <div class="container dv-top-announce-strip__inner">
    <span class="dv-top-announce-strip__icon" aria-hidden="true"><i class="bx bx-bell"></i></span>
    <div class="dv-top-announce-strip__links">
      {{range $i, $a := .NavPublicAnnouncements}}
      {{if $i}}<span class="dv-top-announce-strip__sep" aria-hidden="true">|</span>{{end}}
      <a href="/announcements?id={{$a.ID}}" class="dv-top-announce-strip__link{{if $a.NavTextColor}} dv-top-announce-strip__link--custom{{end}}" title="{{$a.Title}}"{{if $a.NavTextColor}} style="color: {{$a.NavTextColor}};"{{end}}>{{$a.Title}}</a>
      {{end}}
    </div>
  </div>
</div>
{{end}}
<header class="site-header border-bottom">
  <div class="container site-header-bar">
    <a class="site-logo text-decoration-none fw-semibold" href="/" title="{{.SiteName}}">{{template "site-logo-inline" .}}</a>
    <div class="site-header-tools">
      <a class="docs-stats-btn{{if index .Extra "stats_nav_active"}} is-active{{end}}" href="/stats" title="{{T "nav.stats"}}">
        <i class="bx bx-bar-chart-alt-2"></i>
        <span class="stats-btn-text">{{T "nav.stats"}}</span>
      </a>
      <button type="button" class="docs-search-btn" id="searchBtn" title="{{T "nav.search"}} (Ctrl+K)">
        <i class="bx bx-search"></i>
        <span class="search-btn-text">{{T "nav.search"}}</span>
        <span class="search-btn-shortcut">Ctrl+K</span>
      </button>
      <button type="button" class="docs-theme-toggle" id="themeToggle" title="{{T "nav.theme"}}" aria-label="{{T "nav.theme"}}">
        <i class="bx bx-sun"></i>
      </button>
      {{if .LangSwitcherShow}}<span class="dv-lang-switcher-host">{{template "lang_switcher" .}}</span>{{end}}
      <button type="button" class="site-nav-toggle" id="siteNavToggle" title="{{T "nav.menu_toggle"}}" aria-label="{{T "nav.menu_toggle"}}" aria-expanded="false" aria-controls="siteNav">
        <i class="bx bx-menu"></i>
      </button>
    </div>
    <nav class="site-nav" id="siteNav" aria-label="{{T "nav.links_aria"}}">
      {{range .TopNavLinks}}
      <a class="nav-text-link" href="{{.URL}}" target="{{if .Target}}{{.Target}}{{else}}_self{{end}}"{{if eq .Target "_blank"}} rel="noopener noreferrer"{{end}} title="{{.Text}}">
        {{if .Icon}}<i class="{{.Icon}}" aria-hidden="true"></i>{{end}}{{.Text}}
      </a>
      {{end}}
      {{if .IsAdmin}}<a class="nav-text-link" href="/admin">{{T "nav.admin"}}</a>{{end}}
    </nav>
  </div>
</header>
{{template "frontend_search_modal" .}}
{{end}}

{{define "frontend_search_modal"}}
<div class="search-modal-overlay" id="searchModalOverlay" style="display:none;">
  <div class="search-modal" id="searchModal" role="dialog" aria-modal="true" aria-label="{{T "search.title"}}">
    <div class="search-modal-header">
      <div class="search-modal-input-wrapper">
        <i class="bx bx-search search-modal-icon"></i>
        <input type="text" class="search-modal-input" id="searchModalInput"
               placeholder="{{T "search.placeholder"}}" autocomplete="off">
        <span class="search-modal-shortcut">Ctrl+K</span>
      </div>
      <button type="button" class="search-modal-close" id="searchModalClose" title="{{T "search.close"}}" aria-label="{{T "search.close"}}">
        <i class="bx bx-x"></i>
      </button>
    </div>
    {{if .CurrentProject}}
    <div class="search-scope-bar" id="searchScopeBar" role="group" aria-label="{{T "search.scope_label"}}">
      <button type="button" class="search-scope-btn is-active" data-scope="project" id="searchScopeProject">
        <i class="bx bx-folder"></i>
        <span>{{T "search.scope_project"}}</span>
      </button>
      <button type="button" class="search-scope-btn" data-scope="all" id="searchScopeAll">
        <i class="bx bx-grid-alt"></i>
        <span>{{T "search.scope_all"}}</span>
      </button>
    </div>
    {{end}}
    <div class="search-modal-body">
      <div class="search-results-header">
        <span class="search-results-title">{{T "search.results_title"}}</span>
        <span class="search-results-count" id="searchResultsCount"></span>
      </div>
      <div class="search-results-list" id="searchResultsList"></div>
      <div class="search-results-footer">
        <span class="search-hint">{{T "search.hint"}}</span>
        <a class="search-hint ms-2" href="/search{{if .CurrentProject}}?ctx={{urlquery .CurrentProject}}&amp;project={{urlquery .CurrentProject}}{{end}}" id="searchOpenPageLink">{{T "search.open_page"}}</a>
      </div>
    </div>
  </div>
</div>
<script>
window.DV_SEARCH_I18N = {
  loading: {{json (T "search.loading")}},
  idle: {{json (T "search.idle_hint")}},
  idleCount: {{json (T "search.idle_count")}},
  empty: {{json (T "search.no_results")}},
  noResults: {{json (T "search.no_results")}},
  error: {{json (T "search.error")}},
  errorLabel: {{json (T "search.error_label")}},
  rateLimited: {{json (T "search.rate_limited")}},
  queryInvalid: {{json (T "search.query_invalid")}},
  count: {{json (T "search.count")}},
  project: {{json (T "search.project_meta")}},
  productHit: {{json (T "search.product_hit")}},
  productCode: {{json (T "search.product_code_meta")}}
};
window.DV_SEARCH_CTX = {
  currentProject: {{json .CurrentProject}},
  projectAlias: {{if and .Project (index .Project "alias")}}{{json (index .Project "alias")}}{{else}}{{json .CurrentProject}}{{end}},
  defaultScope: {{if .CurrentProject}}"project"{{else}}"all"{{end}}
};
</script>
{{end}}

{{define "frontend_site_footer"}}
<footer class="site-footer">
  {{if .FooterNavLinks}}
  <nav class="site-footer-nav" aria-label="{{T "footer.nav_aria"}}">
    {{range $i, $link := .FooterNavLinks}}
    {{if $i}}<span class="site-footer-sep" aria-hidden="true">|</span>{{end}}
    <a href="{{$link.URL}}" class="footer-link"{{if $link.External}} target="_blank" rel="noopener noreferrer"{{end}}>{{$link.Label}}</a>
    {{end}}
  </nav>
  {{end}}
  {{if .ShowFooterCompliance}}
  <div class="site-footer-compliance" role="navigation" aria-label="{{T "footer.compliance_aria"}}">
    <a class="footer-link" href="/privacy#data-rights">{{if .ComplianceGDPRLink}}{{.ComplianceGDPRLink}}{{else}}{{T "footer.link_gdpr"}}{{end}}</a>
    <span class="site-footer-sep" aria-hidden="true">·</span>
    <a class="footer-link" href="/privacy#ccpa">{{if .ComplianceCCPALink}}{{.ComplianceCCPALink}}{{else}}{{T "footer.link_ccpa"}}{{end}}</a>
  </div>
  {{end}}
  <div class="site-footer-inner">
    <div class="site-footer-copyright">&copy; {{.Year}} <a href="/" class="footer-link">{{.SiteName}}</a>. {{T "footer.all_rights"}}</div>
    {{if .FooterShowDevVersion}}
    <span class="site-footer-sep site-footer-sep-main" aria-hidden="true">·</span>
    <div class="site-footer-meta">
      <span>{{T "footer.powered_by"}} <a href="{{.BrandURL}}" class="footer-link" target="_blank" rel="noopener noreferrer" title="{{.BrandTeam}}">{{.BrandTeam}}</a></span>
      <span class="site-footer-sep" aria-hidden="true">·</span>
      <span class="site-footer-badge">{{if .ProductDetailURL}}<a href="{{.ProductDetailURL}}" class="footer-link" target="_blank" rel="noopener noreferrer" title="{{.FooterProduct}}">{{.FooterProduct}}</a>{{else}}{{.FooterProduct}}{{end}}{{if .IsPro}}&nbsp;{{.EditionName}}{{end}}&nbsp;v{{.Version}}</span>
    </div>
    {{end}}
  </div>
</footer>
{{template "frontend/cookie_consent_bar" .}}
{{end}}

{{define "frontend/cookie_consent_bar"}}
{{if .ShowCookieConsent}}
<link rel="stylesheet" href="{{asset "/static/css/cookie-consent.css"}}">
<div id="dv-cookie-consent" class="dv-cookie-consent" role="dialog" aria-modal="false" aria-labelledby="dv-cookie-consent-title" aria-describedby="dv-cookie-consent-desc" hidden data-cookie-name="dv_cookie_consent" data-accept="{{T "compliance.cookie_accept"}}" data-reject="{{T "compliance.cookie_reject"}}">
  <div class="dv-cookie-consent__inner">
    <p id="dv-cookie-consent-title" class="dv-cookie-consent__title">{{if .CookieConsentTitle}}{{.CookieConsentTitle}}{{else}}{{T "compliance.cookie_title"}}{{end}}</p>
    <p id="dv-cookie-consent-desc" class="dv-cookie-consent__desc">{{if .CookieConsentBody}}{{.CookieConsentBody}}{{else}}{{T "compliance.cookie_body"}}{{end}} <a href="/privacy">{{T "compliance.cookie_privacy_link"}}</a></p>
    <div class="dv-cookie-consent__actions">
      <button type="button" class="dv-cookie-consent__btn dv-cookie-consent__accept" id="dv-cookie-accept"></button>
      <button type="button" class="dv-cookie-consent__btn dv-cookie-consent__reject" id="dv-cookie-reject"></button>
    </div>
  </div>
</div>
<script src="{{asset "/static/js/cookie-consent-bar.js"}}" defer></script>
{{end}}
{{end}}

{{define "docs_ui_i18n"}}
<script>
window.ModalI18n = {
  cancel: {{json (T "js.modal_cancel")}},
  ok: {{json (T "js.modal_ok")}}
};
window.DocsI18n = {
  tocExpand: {{json (T "js.toc_expand")}},
  tocMinimize: {{json (T "js.toc_minimize")}},
  contentViewRestore: {{json (T "js.content_view_restore")}},
  contentViewMaximize: {{json (T "js.content_view_maximize")}},
  pageShareToolsCollapse: {{json (T "js.page_share_tools_collapse")}},
  pageShareToolsExpand: {{json (T "js.page_share_tools_expand")}},
  textShareCopyText: {{json (T "js.text_share_copy_text")}},
  textShareCopyLink: {{json (T "js.text_share_copy_link")}},
  textShareNoSelection: {{json (T "js.text_share_no_selection")}},
  textShareTextCopied: {{json (T "js.text_share_text_copied")}},
  textShareCopied: {{json (T "js.text_share_link_copied")}},
  textShareCopyFailed: {{json (T "js.text_share_copy_failed")}},
  actionLikeFailed: {{json (T "js.action_like_failed")}}
};
window.SG_I18N = {
  searchEmpty: {{json (T "search.docs_empty")}},
  searchFoundPrefix: {{json (T "search.found_prefix")}},
  searchFoundSuffix: {{json (T "search.found_suffix")}},
  searchLoading: {{json (T "search.docs_loading")}},
  searchFailed: {{json (T "search.docs_failed")}},
  tocExpand: {{json (T "js.toc_expand")}},
  tocMinimize: {{json (T "js.toc_minimize")}}
};
</script>
{{end}}

{{define "frontend_theme_script"}}
{{template "docs_ui_i18n" .}}
<script src="{{asset (printf "%s/assets/js/modal.js" .FrontendTplDir)}}"></script>
<script src="{{asset (printf "%s/assets/js/portal-theme.js" .FrontendTplDir)}}"></script>
<script src="{{asset (printf "%s/assets/js/portal-search.js" .FrontendTplDir)}}"></script>
<script src="{{asset "/static/js/dv-lazy-images.js"}}"></script>
<script src="{{asset "/static/js/lang-switcher.js"}}"></script>
{{end}}