{{define "admin/site_pages.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-file-blank" "Title" (T "admin.site_pages.title") "Desc" (T "admin.site_pages.page_desc"))}}

<style>
  .sc-sitepages-tabs {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
    margin: 0 0 1rem; padding: 0.35rem;
    border-radius: 0.65rem; background: #f8fafc; border: 1px solid #e2e8f0;
  }
  .sc-sitepages-tabs a {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.9rem; border-radius: 0.5rem;
    border: 1px solid transparent; color: #475569; text-decoration: none;
    font-size: 0.9rem; font-weight: 600;
  }
  .sc-sitepages-tabs a:hover { background: #fff; border-color: #e2e8f0; color: #0f172a; }
  .sc-sitepages-tabs a.is-active {
    background: #fff; border-color: #2563eb; color: #2563eb;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
  }
  .sc-sitepages-toolbar {
    display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: flex-end;
    margin-bottom: 1rem; padding: 0.95rem 1rem;
    border: 1px solid #e2e8f0; border-radius: 0.65rem; background: #fff;
  }
  .sc-sitepages-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 2.1rem; padding: 0.3rem 0.7rem; border-radius: 0.4rem;
    font-size: 0.84rem; font-weight: 600; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  }
  .sc-sitepages-badge--muted { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
  .sc-sitepages-html {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem; line-height: 1.65; min-height: 20rem;
  }
  .sc-sitepages-note {
    margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 0.55rem;
    border: 1px solid #dbeafe; background: #eff6ff; color: #334155; font-size: 0.86rem;
  }
</style>

{{if index .Data "FlashError"}}
<div class="alert alert-danger py-2">{{index .Data "FlashError"}}</div>
{{end}}
{{if index .Data "FlashNotice"}}
<div class="alert alert-success py-2">{{index .Data "FlashNotice"}}</div>
{{end}}

{{if index .Data "ShowComplianceAdmin"}}
<section class="cs-admin-section mb-3">
  <div class="cs-admin-section__body">
    <h3 class="h6 mb-2">{{T "admin.site_pages.compliance"}}</h3>
    <p class="small text-muted mb-3">{{T "admin.site_pages.compliance_intro"}}</p>
    <form method="post" action="/admin/site-pages" class="mb-0 w-100">
      <input type="hidden" name="action" value="save_compliance">
      <input type="hidden" name="page" value="{{index .Data "AdminSitePageStem"}}">
      <input type="hidden" name="content_lang" value="{{index .Data "AdminSitePageLang"}}">
      <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" name="compliance_enabled" value="1" id="compliance_enabled" {{if index .Data "ComplianceEnabled"}}checked{{end}}>
        <label class="form-check-label" for="compliance_enabled">{{T "admin.site_pages.compliance_enable"}}</label>
      </div>
      <div class="mb-2"><label class="form-label small">{{T "admin.site_pages.gdpr_footer"}}</label><input class="form-control form-control-sm" type="text" name="compliance_gdpr_link" maxlength="80" value="{{index .Data "ComplianceGDPRLink"}}"></div>
      <div class="mb-2"><label class="form-label small">{{T "admin.site_pages.gdpr_title"}}</label><input class="form-control form-control-sm" type="text" name="compliance_gdpr_title" maxlength="120" value="{{index .Data "ComplianceGDPRTitle"}}"></div>
      <div class="mb-3"><label class="form-label small">{{T "admin.site_pages.gdpr_body"}}</label><textarea class="form-control form-control-sm font-monospace" name="compliance_gdpr_body" rows="4">{{index .Data "ComplianceGDPRBody"}}</textarea></div>
      <div class="mb-2"><label class="form-label small">{{T "admin.site_pages.ccpa_footer"}}</label><input class="form-control form-control-sm" type="text" name="compliance_ccpa_link" maxlength="80" value="{{index .Data "ComplianceCCPALink"}}"></div>
      <div class="mb-2"><label class="form-label small">{{T "admin.site_pages.ccpa_title"}}</label><input class="form-control form-control-sm" type="text" name="compliance_ccpa_title" maxlength="120" value="{{index .Data "ComplianceCCPATitle"}}"></div>
      <div class="mb-3"><label class="form-label small">{{T "admin.site_pages.ccpa_body"}}</label><textarea class="form-control form-control-sm font-monospace" name="compliance_ccpa_body" rows="4">{{index .Data "ComplianceCCPABody"}}</textarea></div>
      <div class="mb-2"><label class="form-label small">{{T "admin.site_pages.cookie_title"}}</label><input class="form-control form-control-sm" type="text" name="compliance_cookie_title" maxlength="120" value="{{index .Data "ComplianceCookieTitle"}}"></div>
      <div class="mb-3"><label class="form-label small">{{T "admin.site_pages.cookie_body"}}</label><textarea class="form-control form-control-sm" name="compliance_cookie_body" rows="3" maxlength="960">{{index .Data "ComplianceCookieBody"}}</textarea></div>
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.site_pages.save_compliance"}}</button>
    </form>
  </div>
</section>
{{end}}

<section class="cs-admin-section mb-3">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-link"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.site_pages.footer_nav"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.site_pages.footer_nav_sub"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body">
    <p class="small text-muted mb-3">{{T "admin.site_pages.footer_links_hint"}}</p>
    <form method="post" action="/admin/site-pages">
      <input type="hidden" name="action" value="save_nav">
      <input type="hidden" name="page" value="{{index .Data "AdminSitePageStem"}}">
      <input type="hidden" name="content_lang" value="{{index .Data "AdminSitePageLang"}}">
      <div class="table-responsive">
        <table class="table table-sm align-middle">
          <thead>
            <tr>
              <th style="width:4rem;">{{T "admin.site_pages.col_show"}}</th>
              <th style="width:7rem;">{{T "admin.site_pages.col_page"}}</th>
              <th>{{T "admin.site_pages.col_label"}}</th>
              <th>{{T "admin.site_pages.col_url"}}</th>
              <th style="width:5rem;">{{T "admin.site_pages.col_sort"}}</th>
            </tr>
          </thead>
          <tbody>
            {{$defs := index .Data "AdminSitePageNavDefault"}}
            {{range index .Data "AdminSitePageNav"}}
            <tr>
              <td>
                <input type="checkbox" class="form-check-input" name="nav_enabled_{{.Stem}}" value="1" {{if .Enabled}}checked{{end}}>
              </td>
              <td><code>{{.Stem}}</code></td>
              <td>
                <input class="form-control form-control-sm" type="text" name="nav_label_{{.Stem}}" maxlength="64" value="{{.Label}}" placeholder="{{index $defs .Stem}}">
              </td>
              <td>
                <input class="form-control form-control-sm font-monospace" type="text" name="nav_url_{{.Stem}}" maxlength="500" value="{{.URL}}" placeholder="/{{.Stem}}">
              </td>
              <td>
                <input class="form-control form-control-sm" type="number" name="nav_sort_{{.Stem}}" value="{{.Sort}}">
              </td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
      <div class="form-text mb-2">{{T "admin.site_pages.link_help"}}</div>
      <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.site_pages.save"}}{{T "admin.site_pages.footer_nav"}}</button>
    </form>
  </div>
</section>

<section class="cs-admin-section" id="sd-sitepages-public" style="scroll-margin-top:1.25rem">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-edit-alt"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{index .Data "PageHeading"}}</h2>
      <p class="cs-admin-section__head-sub">{{index .Data "PageDesc"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body">
    <nav class="sc-sitepages-tabs" aria-label="{{T "admin.site_pages.tabs_aria"}}">
      {{range index .Data "OverlayStems"}}
      <a href="/admin/site-pages?page={{index . "stem"}}&amp;content_lang={{index $.Data "AdminSitePageLang"}}#sd-sitepages-public" class="{{if eq (index $.Data "AdminSitePageStem") (index . "stem")}}is-active{{end}}">{{index . "label"}}</a>
      {{end}}
    </nav>

    <form method="post" action="/admin/site-pages?page={{index .Data "AdminSitePageStem"}}&amp;content_lang={{index .Data "AdminSitePageLang"}}#sd-sitepages-public" class="row g-2 align-items-end mb-3 pb-3 border-bottom">
      <input type="hidden" name="action" value="create_custom">
      <input type="hidden" name="content_lang" value="{{index .Data "AdminSitePageLang"}}">
      <div class="col-auto">
        <label class="form-label small mb-1" for="custom_stem">{{T "admin.site_pages.custom_stem"}}</label>
        <input class="form-control form-control-sm" id="custom_stem" name="custom_stem" maxlength="32" pattern="[a-z][a-z0-9-]{1,31}" placeholder="refund" required>
      </div>
      <div class="col-auto">
        <label class="form-label small mb-1" for="custom_label">{{T "admin.site_pages.custom_label"}}</label>
        <input class="form-control form-control-sm" id="custom_label" name="custom_label" maxlength="64" placeholder="{{T "admin.site_pages.custom_label_ph"}}">
      </div>
      <div class="col-auto align-self-end">
        <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bx bx-plus me-1"></i>{{T "admin.site_pages.custom_create"}}</button>
      </div>
      <div class="col-12"><div class="form-text mb-0">{{T "admin.site_pages.custom_hint"}}</div></div>
    </form>

    <div class="sc-sitepages-toolbar">
      <div class="cs-admin-field mb-0">
        <label class="form-label" for="sc-sitepages-lang">{{T "admin.site_pages.content_lang"}}</label>
        <div class="form-text mb-1">{{T "admin.site_pages.lang_hint"}}</div>
        <select class="form-select form-select-sm" id="sc-sitepages-lang" style="max-width:14rem" onchange="window.location.href='/admin/site-pages?page={{index .Data "AdminSitePageStem"}}&amp;content_lang='+encodeURIComponent(this.value)+'#sd-sitepages-public'">
          {{range index .Data "AdminLangPackOptions"}}
          <option value="{{.}}"{{if eq . (index $.Data "AdminSitePageLang")}} selected{{end}}>{{.}}</option>
          {{end}}
        </select>
      </div>
      <div class="cs-admin-field mb-0">
        <label class="form-label">{{T "admin.site_pages.status"}}</label>
        <div>
          {{if index .Data "AdminSitePageHasOverlay"}}
          <span class="sc-sitepages-badge"><i class="bx bx-edit"></i> {{T "admin.site_pages.custom"}}</span>
          {{else}}
          <span class="sc-sitepages-badge sc-sitepages-badge--muted"><i class="bx bx-book-content"></i> {{T "admin.site_pages.default"}}</span>
          {{end}}
        </div>
      </div>
    </div>

    <p class="sc-sitepages-note"><i class="bx bx-info-circle"></i> {{T "admin.site_pages.html_note"}}</p>

    <form method="post" action="/admin/site-pages" id="sc-sitepages-form">
      <input type="hidden" name="page" value="{{index .Data "AdminSitePageStem"}}">
      <input type="hidden" name="content_lang" value="{{index .Data "AdminSitePageLang"}}">

      <div class="mb-3">
        <label class="form-label" for="field_page_title">{{T "admin.site_pages.field_title"}}</label>
        <input class="form-control form-control-sm" id="field_page_title" name="field_page_title" type="text" maxlength="120" value="{{index (index .Data "AdminSitePageValues") "page.title"}}">
      </div>
      <div class="mb-3">
        <label class="form-label" for="field_page_body">{{T "admin.site_pages.body_html"}}</label>
        <textarea class="form-control sc-sitepages-html" id="field_page_body" name="field_page_body" rows="18" maxlength="32000" placeholder="{{T "admin.site_pages.body_ph"}}">{{index (index .Data "AdminSitePageValues") "page.body"}}</textarea>
      </div>
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <button type="submit" class="btn btn-primary btn-sm" name="action" value="save">{{T "admin.site_pages.save"}}</button>
        <a class="btn btn-outline-secondary btn-sm" href="{{index .Data "AdminSitePagePreviewURL"}}" target="_blank" rel="noopener noreferrer"><i class="bx bx-link-external"></i> {{T "admin.site_pages.open_preview"}}</a>
        {{if index .Data "AdminSitePageIsCustom"}}
        <button type="submit" class="btn btn-outline-danger btn-sm" name="action" value="delete_custom" onclick="return confirm('{{T "admin.site_pages.custom_delete_confirm"}}');">{{T "admin.site_pages.custom_delete"}}</button>
        {{else}}
        <button type="submit" class="btn btn-outline-danger btn-sm" form="sc-sitepages-reset-form" onclick="return confirm('{{T "admin.site_pages.confirm_reset"}}');">{{T "admin.site_pages.reset"}}</button>
        {{end}}
      </div>
    </form>

    <form method="post" action="/admin/site-pages" id="sc-sitepages-reset-form" class="d-none">
      <input type="hidden" name="page" value="{{index .Data "AdminSitePageStem"}}">
      <input type="hidden" name="content_lang" value="{{index .Data "AdminSitePageLang"}}">
      <input type="hidden" name="action" value="reset">
    </form>
  </div>
</section>
</div>
<script>
(function () {
  var params = new URLSearchParams(window.location.search || '');
  var want = params.has('page') || (window.location.hash || '') === '#sd-sitepages-public';
  if (!want) return;
  function scrollPublicBlock() {
    var el = document.getElementById('sd-sitepages-public');
    if (!el || typeof el.scrollIntoView !== 'function') return;
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () { setTimeout(scrollPublicBlock, 0); });
  } else {
    setTimeout(scrollPublicBlock, 0);
  }
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}