<!-- prettier-ignore -->
<%
const planSection = {
  id: "section1",
  icon: "logo-gradient-gloss",
  title: "Plan and billing",
}
const librarySection = {
  id: "section2",
  icon: "library",
  title: "Library location",
}
const scanSection = {
  id: "section3",
  icon: "open-folder",
  title: "Scan locations",
}
const organizationSection = {
  id: "section4",
  icon: "file-cabinet",
  title: "Automatic organization",
}
const aggregationSection = {
  id: "section-aggregation",
  icon: "sheep",
  title: "Deduplication",
  advanced: true,
}
const previewSection = {
  id: "section5",
  icon: "camera",
  title: "Preview sizes",
  advanced: true,
}
const updatesSection = {
  id: "section6",
  icon: "gift",
  title: "Updates",
  advanced: true,
}
const privacySection = {
  id: "section7",
  icon: "shield",
  title: "Privacy",
}
const loggingSection = {
  id: "section9",
  icon: "microscope",
  title: "Logging",
  advanced: true,
}
const licenseSection = {
  id: "section10",
  icon: "scales",
  title: "License agreement",
}
// Sections flagged `advanced` load hidden behind a "Show advanced settings"
// button, so a first visit sees only the cards everyone needs. They sit
// together so one button (and one section-index entry) stands in for all of
// them; Privacy stays visible above them because it is a consent choice.
// Revealing is remembered by the browser. The hidden cards stay in the form,
// so Save still posts every value. See revealAdvancedSettings in
// src/fe/settings.ts.
const settingsSections = [
  planSection,
  librarySection,
  scanSection,
  organizationSection,
  privacySection,
  aggregationSection,
  previewSection,
  updatesSection,
  loggingSection,
  licenseSection,
]
const advancedSections = settingsSections.filter(section => section.advanced)
// "Deduplication, preview sizes, updates, and logging"
const advancedTitles = advancedSections.map((section, i) =>
  i === 0 ? section.title : section.title.toLowerCase()
)
const advancedSummary =
  advancedTitles.slice(0, -1).join(", ") + ", and " + advancedTitles.at(-1)
const originalsDirCopyLead =
  "If enabled, PhotoStructure will copy your original photos and videos into"
const originalsDirCopyAfterValue =
  locals.settingOverrides.originalsDir?.relativeToUnselectedLibrary === true
    ? " relative to the PhotoStructure Library selected above. This location is set"
    : ". This location is set"
%>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>PhotoStructure settings</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link
      rel="stylesheet"
      href="/app/settings.css<%= locals.cacheBuster ? '?_=' + locals.cacheBuster : '' %>"
      nonce="<%= locals.nonce %>"
    />
    <%- include('_fouc-prevention') %>
  </head>
  <body
    id="app"
    class="settings <%= locals.welcome ? 'onboarding' : '' %> <%= locals.bodyClass ?? '' %>"
  >
    <header class="reveal bg-color-gradient left-middle-right">
      <%# no-drag, as every other header's .left has: under macOS Electron
      `_electron.scss` makes the whole header a window-drag surface, and without
      this carve-out clicking any icon below drags the window instead of
      navigating. %>
      <div class="left no-drag">
        <%# Deliberately not hide-on-s: this is the only way off this page, and
        the three icons below already disappear on small screens. Omitted while
        this page is the first-run welcome step, because no library exists yet
        to return to. The glyph is Material's "home", matching the entry
        AdminPageHeader.vue gives this destination on /health, /activity, and
        /logs; the gradient header fills it, so it needs no `fill`. %> <% if
        (!locals.welcome) { %>
        <a class="vicon" href="/" title="Return to library">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
          </svg>
        </a>
        <% } %>
        <a class="vicon hide-on-s" href="/health" title="Health checks">
          <img class="svg" src="/images/health.svg" />
        </a>
        <a class="vicon hide-on-s" href="/activity" title="System activity">
          <img class="svg" src="/images/speed.svg" />
        </a>
        <a class="vicon hide-on-s" href="/logs" title="Log viewer">
          <img class="svg" src="/images/article.svg" />
        </a>
      </div>
      <div class="title middle">
        <img class="logo" src="/images/logo-white.svg" title="PhotoStructure" />
        <div class="text">Settings</div>
      </div>
      <div class="right"></div>
    </header>

    <main>
      <% if (locals.err) { %>
      <div class="error sticky message">
        <p><%= locals.err %></p>
      </div>
      <% } %>

      <div class="container reveal">
        <form class="settings-form mhauto" action="/settings" method="post">
          <input
            type="hidden"
            name="systemSettingsSha"
            value="<%= locals.systemSettingsSha %>"
          />
          <input
            type="hidden"
            name="librarySettingsSha"
            value="<%= locals.librarySettingsSha %>"
          />
          <div class="settings-sections">
            <div id="<%= planSection.id %>" class="section">
              <h2>
                <i class="emj med <%= planSection.icon %>"></i>
                <%= planSection.title %>
              </h2>

              <% if (locals.subNetworkAccessDisabled && locals.subRenewalStatus
              !== "current") { %>
              <div class="warn message" role="alert">
                <p>
                  PhotoStructure is configured not to use the network, so your
                  license can&rsquo;t renew or activate.
                </p>
              </div>
              <% } %> <% if (locals.subRenewalStatus === "pending" &&
              locals.subRenewalPaymentRequired) { %>
              <div class="warn message" role="alert">
                <p>
                  PhotoStructure couldn&rsquo;t renew because your account needs
                  billing attention. <% if (!locals.subNetworkAccessDisabled) {
                  %> <% if (locals.subAutomaticRenewalEnabled) { %> The next
                  automatic attempt is scheduled after <%=
                  locals.subRenewalRetryAt %>. <% } else { %> You can retry
                  after <%= locals.subRenewalRetryAt %>. <% } %> <% } %>
                </p>
                <p>
                  <a href="/plans/billing?then=/settings">Update billing</a>. <%
                  if (!locals.subNetworkAccessDisabled &&
                  locals.subAutomaticRenewalEnabled) { %> PhotoStructure will
                  retry automatically afterward. <% } else { %> <% if
                  (locals.subRenewalRetryUrl) { %>
                  <a href="<%= locals.subRenewalRetryUrl %>">Retry renewal</a>,
                  or re-enable automatic renewal. <% } else if
                  (!locals.subNetworkAccessDisabled) { %> Return after <%=
                  locals.subRenewalRetryAt %> to retry, or re-enable automatic
                  renewal. <% } %> <% } %>
                </p>
              </div>
              <% } else { %> <% if (!locals.subNetworkAccessDisabled &&
              locals.subRenewalStatus === "reactivation_required") { %>
              <div class="warn message" role="alert">
                <p>Your saved license doesn&rsquo;t match this installation.</p>
                <p>
                  <a href="/plans/activate?then=/settings"
                    >Reactivate this installation</a
                  >
                </p>
              </div>
              <% } else if (!locals.subNetworkAccessDisabled &&
              locals.subRenewalStatus === "pending" &&
              !locals.subAutomaticRenewalEnabled) { %>
              <div class="warn message" role="alert">
                <p>
                  License renewal is pending, but automatic renewal is disabled.
                </p>
                <p>
                  <% if (locals.subRenewalRetryUrl) { %>
                  <a href="<%= locals.subRenewalRetryUrl %>">Retry renewal</a>,
                  or re-enable automatic renewal. <% } else if
                  (locals.subRenewalRetryAt) { %> Return after <%=
                  locals.subRenewalRetryAt %> to retry, or re-enable automatic
                  renewal. <% } else { %> Re-enable automatic renewal. <% } %>
                </p>
              </div>
              <% } %> <% if (!locals.subNetworkAccessDisabled &&
              locals.subNeedsActivation) { %>
              <div class="info message">
                <p>
                  <a href="/plans/activate?then=/settings"
                    >Activate this installation</a
                  >
                  so your <span class="plus">plus</span> license can renew
                  automatically.
                </p>
              </div>
              <% } %> <% if (locals.subTier === "lite") { %>
              <p>
                You're using PhotoStructure
                <span class="<%= locals.subTier %>"><%= locals.subTier %></span
                >.
              </p>
              <% if (locals.subRenewalStatus) { %>
              <p>
                Your <span class="plus">plus</span> license isn&rsquo;t
                currently active.
              </p>
              <% } else if (!locals.subNetworkAccessDisabled) { %>
              <p>
                PhotoStructure
                <span class="plus">plus</span> keeps your photos safe by
                validating and organizing them automatically, and helps fund
                future development.
              </p>
              <p>
                <b
                  ><a href="/plans/pick?then=/settings"
                    >Start your 15 day free trial of
                    <span class="plus">plus</span> today</a
                  ></b
                >
              </p>
              <p class="hint">No credit card required.</p>
              <p>
                Already a subscriber?
                <a href="/plans/activate?then=/settings"
                  >Log in to re-activate your license</a
                >
              </p>
              <% } %> <% } else if (locals.subLifetime) { %>
              <p>
                Your PhotoStructure <span class="plus">Lifetime</span> plan
                keeps this installation on <span class="plus">plus</span>.
              </p>
              <% } else if (locals.subTrial) { %>
              <p>
                <span class="plus">plus</span> trial<% if (locals.subExpiresAt)
                { %> &mdash; expires <%= locals.subExpiresAt %><% } %>.
              </p>
              <p>
                <a href="/plans/billing?then=/settings">Manage subscription</a>
              </p>
              <% } else { %>
              <p>
                Your <span class="plus">plus</span>
                subscription keeps PhotoStructure going!
              </p>
              <% if (locals.subExpiresAt) { %>
              <p>
                Your subscription renews or expires <%= locals.subExpiresAt %>.
              </p>
              <% } %>
              <p>
                <a href="/plans/billing?then=/settings">Manage subscription</a>
              </p>
              <% } %> <% } %>
              <div class="buttons card-nav">
                <a class="next btn-small" href="#section2" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= librarySection.id %>" class="section">
              <h2>
                <i class="emj med <%= librarySection.icon %>"></i>
                <%= librarySection.title %>
              </h2>
              <% if (locals.isDocker) { %> <% if (locals.currentLibraryDir) { %>
              <p>
                Your library is
                <tt id="currentLibraryDir"><%= locals.currentLibraryDir %></tt
                >.<% if (locals.currentLibraryLastOpened) { %>
                <span id="currentLibraryLastOpened"
                  ><%= locals.currentLibraryLastOpened %></span
                ><% } %>
              </p>
              <p>
                On Docker, your library's location is part of your container's
                configuration, so it can't be changed from this page. To use a
                different folder, update the container's
                <tt>/ps/library</tt> bind mount (or its
                <tt>PS_LIBRARY_DIR</tt> environment variable) and restart the
                container.
              </p>
              <p>
                <a
                  href="https://photostructure.com/guide/how-do-i-change-my-library/"
                  target="_blank"
                  rel="noopener"
                  >How to change your library's location on Docker</a
                >
              </p>
              <% } else { %>
              <p class="error message">
                PhotoStructure can't find your library. On Docker, your
                library's location comes from your container's configuration:
                bind-mount your library folder to <tt>/ps/library</tt>, or set
                <tt>PS_LIBRARY_DIR</tt> to a folder that exists inside the
                container, and restart it.
              </p>
              <p>
                <a
                  href="https://photostructure.com/guide/how-do-i-change-my-library/"
                  target="_blank"
                  rel="noopener"
                  >How to change your library's location on Docker</a
                >
              </p>
              <% } %> <% } else if (locals.welcome) { %>
              <details open>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >Toggle library information</span
                  >
                </summary>
                <p>
                  Your
                  <a
                    href="https://photostructure.com/guide/library/"
                    target="_blank"
                    rel="noopener"
                    >PhotoStructure Library</a
                  >
                  holds
                </p>
                <ul>
                  <li>a metadata database of your photos and videos,</li>
                  <li>web-safe previews of your images and videos,</li>
                  <li>
                    and, if you enable
                    <a href="#auto-organize">automatic organization</a>, a copy
                    of all your original photos and videos.
                  </li>
                </ul>
                <p>A couple more things to note:</p>
                <ul>
                  <li>
                    This folder must have
                    <a
                      href="https://photostructure.com/getting-started/how-much-disk-space-do-i-need-for-my-photostructure-library/"
                      target="_blank"
                      rel="noopener"
                      >lots of free space</a
                    >.
                  </li>
                  <li>
                    This can be an existing directory, with existing photos and
                    videos.
                  </li>
                  <li>
                    PhotoStructure always scans your library folder for photos
                    and videos.
                  </li>
                </ul>
              </details>
              <% } else { %>
              <details open>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >Toggle library information</span
                  >
                </summary>
                <p>
                  Your
                  <a
                    href="https://photostructure.com/guide/library/"
                    target="_blank"
                    rel="noopener"
                    >PhotoStructure Library</a
                  >
                  is currently
                  <tt id="currentLibraryDir"><%= locals.currentLibraryDir %></tt
                  ><% if (locals.currentLibraryLastOpened) { %>.
                  <span id="currentLibraryLastOpened"
                    ><%= locals.currentLibraryLastOpened %></span
                  ><% } %>
                </p>
                <p>
                  Changing your library location closes your current library and
                  either creates or opens a library in your new folder.
                </p>
                <p>
                  Prior library contents will not be copied over unless you
                  import your prior library folder.
                </p>
              </details>
              <% } %> <% if (!locals.isDocker) { %> <%-
              include('_setting-override', { settingName: 'libraryDir',
              override: locals.settingOverrides.libraryDir }) %> <% } %> <% if
              (!locals.isDocker && locals.settingOverrides.libraryDir == null) {
              %> <% if (locals.suggestedLibraryDirs) { %> <%
              locals.suggestedLibraryDirs.forEach((ea, index) => { %>
              <p></p>
              <label for="libraryDir<%= index %>">
                <input
                  name="libraryDirRadio"
                  type="radio"
                  value="<%= ea.nativePath %>"
                  id="libraryDir<%= index %>"
                  <%= index === 0 ? 'checked' : '' %>
                />
                <div class="wbrpath"><%- ea.wbrPath %></div>
                <% if (ea.isCurrentLibrary) { %>
                <div class="details">
                  This is your current PhotoStructure library.
                </div>
                <% } else if (ea.isLibrary) { %>
                <div class="details">This is a PhotoStructure library.</div>
                <% } %> <% if (ea.lastOpenedLabel) { %>
                <div class="details"><%= ea.lastOpenedLabel %></div>
                <% } %>
                <div class="details">
                  (<%= ea.free %> available<% if (ea.label) { %>&nbsp;on <%=
                  ea.label %><% } %><% if (ea.remote) { %>&nbsp;on <%=
                  ea.remoteShare %>@<%= ea.remoteHost %><% } %>)
                </div>
              </label>
              <% }) %> <% } else { %>
              <p class="warning">
                No library folders were suggested automatically. Enter a
                writable custom library directory on a volume with at least <%=
                locals.minFreeAvailable %> free disk space.
              </p>
              <% } %>

              <p></p>
              <label
                class="library-dir-custom path-component"
                for="libraryDirCustom"
                name="libraryDir"
              >
                <input
                  id="libraryDirCustom"
                  name="libraryDirRadio"
                  type="radio"
                  value="libraryDirCustom"
                />
                <input
                  id="libraryDirCustomInput"
                  class="select-directory-path"
                  name="libraryDir"
                  type="text"
                  placeholder="Custom library directory"
                  max="1024"
                  value="<%= locals.libraryDir ?? '' %>"
                />
                <p class="only-electron"></p>
                <button
                  class="select-directory btn-small hidden only-electron"
                  type="button"
                  data-title="Choose a folder to store your PhotoStructure library"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="24"
                    viewBox="0 0 24 24"
                    width="24"
                  >
                    <path d="M0 0h24v24H0z" fill="none" />
                    <path
                      d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z"
                    />
                  </svg>
                  Select custom library folder
                </button>
              </label>
              <% } %>
              <div class="buttons card-nav">
                <a class="back btn-small" href="#section1" rel="prev">Back</a>
                <a class="next btn-small" href="#section3" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= scanSection.id %>" class="section">
              <h2 id="scan-path-section">
                <i class="emj med <%= scanSection.icon %>"></i>
                <%= scanSection.title %>
              </h2>
              <details id="scanDetails">
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden">Toggle details</span>
                </summary>
                <% if (locals.isDocker) { %>
                <p>
                  <b
                    >Checking all volumes is recommended for most Docker
                    setups.</b
                  >
                  This looks for photos and videos in all directories mounted
                  into the container (via <tt>-v</tt> or <tt>volumes:</tt> in
                  your compose file)&mdash;no need to list them individually!
                </p>
                <% } %>
                <p>PhotoStructure looks for photos and videos in this order:</p>
                <ol>
                  <li>Your library folder (always included)</li>
                  <li>Any paths you've added below</li>
                  <li>If enabled, all remaining volumes</li>
                </ol>
                <p>
                  PhotoStructure automatically ignores
                  <a
                    href="https://photostructure.com/guide/how-to-hide-directories/"
                    target="_blank"
                    rel="noopener"
                    >hidden, system, application, and NoMedia directories</a
                  >.
                </p>
                <p>
                  Changing these settings won't remove photos already in your
                  library.
                </p>
                <p>
                  <a
                    href="https://photostructure.com/guide/scan-paths/"
                    target="_blank"
                    rel="noopener"
                    >Learn more about scan paths.</a
                  >
                </p>
              </details>

              <p class="scan-hint">
                Your library folder is always included. You can check all
                <a
                  href="https://photostructure.com/guide/what-is-a-volume/"
                  target="_blank"
                  rel="noopener"
                  >volumes</a
                >, add specific paths, or both.
              </p>

              <%- include('_setting-override', { settingName: 'scanAllDrives',
              override: locals.settingOverrides.scanAllDrives }) %>

              <label for="scanAllDrives" class="scan-all-drives">
                <input
                  id="scanAllDrives"
                  name="scanAllDrives"
                  type="checkbox"
                  value="true"
                  <%= locals.scanAllDrives !== false &&
                  (locals.settingOverrides.scanAllDrives != null ||
                  !(locals.welcome && locals.isElectron && locals.isMac)) ?
                  'checked' : '' %>
                  <%=
                  locals.settingOverrides.scanAllDrives != null ? 'disabled' :
                  '' %>
                />
                Look in all volumes for photos and videos <% if
                (locals.isDocker) { %> (<b>recommended</b> &mdash;
                <a class="open-scan-details" href="#scanDetails">why?</a>) <% }
                %>
              </label>

              <% if (locals.welcome && locals.isElectron && locals.isMac) { %>
              <p class="scan-hint">
                Choose specific folders below to avoid broad macOS permission
                requests. If you enable all volumes, PhotoStructure will request
                access before synchronization starts.
              </p>
              <% } %> <%- include('_setting-override', { settingName:
              'scanPaths', override: locals.settingOverrides.scanPaths }) %>

              <fieldset
                id="scanPathsFieldset"
                class="settings-control-fieldset"
                <%= locals.settingOverrides.scanPaths != null ? 'disabled' : '' %>
              >
                <label
                  class="path-component"
                  for="scanPath"
                  data-setting-name="scanPaths"
                >
                  <span class="scan-paths-heading"
                    >Additional places to look:</span
                  >
                  <div
                    id="scanPaths"
                    class="input-container"
                    data-placeholder="Path to a folder with photos or videos"
                    data-paths="<%= locals.jsonScanPaths %>"
                  ></div>

                  <div class="scan-path-buttons">
                    <% if (!locals.isDocker) { %> <% if (!(locals.isElectron &&
                    locals.isMac)) { %>
                    <button
                      id="scanMyPictures"
                      class="btn-small"
                      type="button"
                      title="Click to add <%= locals.picturesPath %>"
                      data-path="<%= locals.picturesPath %>"
                    >
                      <svg
                        fill="#e3e3e3"
                        version="1.1"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                          d="m5 17h14l-3.5-4.5-2.5 3.01-3.5-4.51zm15-11h-8l-2-2h-6c-1.1 0-1.99 0.9-1.99 2l-0.01 12c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2zm0 12h-16v-12h5.17l2 2h8.83z"
                        />
                      </svg>
                      Add My Pictures folder
                    </button>
                    <% } %>
                    <button
                      class="btn-small select-directory hidden only-electron"
                      type="button"
                      title="Browse for a folder with photos or videos"
                      data-properties="openDirectory,createDirectory"
                      data-default-path="<%= locals.picturesPath %>"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                      >
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                          d="m14 16h2v-2h2v-2h-2v-2h-2v2h-2v2h2zm-10 4q-0.825 0-1.41-0.588t-0.588-1.41v-12q0-0.825 0.588-1.41t1.41-0.588h6l2 2h8q0.825 0 1.41 0.588t0.588 1.41v10q0 0.825-0.588 1.41t-1.41 0.588zm0-2h16v-10h-8.82l-2-2h-5.18zm0 0v-12z"
                        />
                      </svg>
                      Add folder
                    </button>
                    <% } %>
                    <button
                      id="addScanPath"
                      class="btn-small not-electron"
                      type="button"
                      title="Add a folder path"
                    >
                      <svg
                        fill="#e3e3e3"
                        version="1.1"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="m14 16h2v-2h2v-2h-2v-2h-2v2h-2v2h2zm-10 4q-0.825 0-1.41-0.588t-0.588-1.41v-12q0-0.825 0.588-1.41t1.41-0.588h6l2 2h8q0.825 0 1.41 0.588t0.588 1.41v10q0 0.825-0.588 1.41t-1.41 0.588zm0-2h16v-10h-8.82l-2-2h-5.18zm0 0v-12z"
                        />
                      </svg>
                      Add folder
                    </button>
                  </div>
                </label>
              </fieldset>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section2" rel="prev">Back</a>
                <a class="next btn-small" href="#section4" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= organizationSection.id %>" class="section">
              <h2 id="auto-organize">
                <i class="emj med <%= organizationSection.icon %>"></i>
                <%= organizationSection.title %>
              </h2>
              <details>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >Toggle organization information</span
                  >
                </summary>
                <p>
                  PhotoStructure can
                  <a
                    href="https://photostructure.com/getting-started/automatic-library-organization/"
                    target="_blank"
                    rel="noopener"
                    >copy the photos and videos it finds into your
                    PhotoStructure Library</a
                  >. This is ideal if your photos are scattered across several
                  drives, you might have duplicates, and you'd really like
                  everything to be organized into
                  <dfn
                    tooltip="Note that this drive needs to have enough free space to hold all your photos and videos. A Network Attached Storage (NAS) or large external hard drive with lots of free disk space are both good choices."
                    >one, tidy place</dfn
                  >.
                </p>
                <ul>
                  <li>
                    PhotoStructure will
                    <dfn
                      tooltip="The same photo or video will not be copied more than once into your library."
                      >de-duplicate</dfn
                    >
                    photos and videos automatically.
                    <a
                      href="https://photostructure.com/guide/what-do-you-mean-by-deduplicate/"
                      target="_blank"
                      rel="noopener"
                      >Learn more</a
                    >.
                  </li>
                  <li>
                    Photos and videos already found in your library will remain
                    in their current location
                  </li>
                  <li>
                    New photos and videos will be copied into
                    <dfn
                      tooltip="For example, photos taken today would be copied into <%= locals.samplePath %>."
                      >date-stamped folders</dfn
                    >
                  </li>
                </ul>
                <p>
                  If you don't have an active PhotoStructure
                  <span class="plus">plus</span> subscription:
                </p>
                <ul>
                  <li>
                    this setting is ignored: PhotoStructure won't copy new files
                    into your library.
                  </li>
                  <li>
                    Existing files in your library will remain in their current
                    location.
                  </li>
                </ul>
              </details>
              <p>
                Copy my photos and videos into my PhotoStructure library when I
                have an active
                <span class="plus">plus</span> subscription.
              </p>

              <%- include('_setting-override', { settingName: 'originalsDir',
              override: locals.settingOverrides.originalsDir, beforeValue:
              originalsDirCopyLead, afterValue: originalsDirCopyAfterValue,
              afterSource: '.' }) %> <%- include('_setting-override', {
              settingName: 'copyAssetsToLibrary', override:
              locals.settingOverrides.copyAssetsToLibrary }) %>

              <p>
                <label for="copyEnabled">
                  <input
                    id="copyEnabled"
                    name="copyAssets"
                    type="radio"
                    value="copyEnabled"
                    data-setting-name="copyAssetsToLibrary"
                    <%= locals.copyAssets ? 'checked' : '' %>
                    <%=
                    locals.settingOverrides.copyAssetsToLibrary != null ?
                    'disabled' : '' %>
                  />
                  <i class="emj thumbs-up"></i>
                  <b>Yes,</b> please
                </label>
              </p>

              <p>
                <label for="copyDisabled">
                  <input
                    id="copyDisabled"
                    name="copyAssets"
                    type="radio"
                    value="copyDisabled"
                    data-setting-name="copyAssetsToLibrary"
                    <%= !locals.copyAssets ? 'checked' : '' %>
                    <%=
                    locals.settingOverrides.copyAssetsToLibrary != null ?
                    'disabled' : '' %>
                  />
                  <i class="emj thumbs-down"></i>
                  <b>No thanks,</b> I like my photos and videos where they
                  already are.
                </label>
              </p>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section3" rel="prev">Back</a>
                <a class="next btn-small" href="#section7" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= privacySection.id %>" class="section">
              <h2>
                <i class="emj med <%= privacySection.icon %>"></i>
                <%= privacySection.title %>
              </h2>

              <h3>Installation information</h3>
              <p>
                When PhotoStructure checks for updates, is it OK to share basic
                information about your installation?
              </p>

              <details>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >Toggle user agent information</span
                  >
                </summary>
                <p>
                  If enabled, your library will send a User-Agent that includes
                  basic information about your installation. This includes your
                  current PhotoStructure edition, version, operating system, and
                  your subscription state. Yours looks like this:
                </p>
                <tt><%= locals.userAgent %></tt>
                <p>
                  If disabled, the User-Agent will just be
                  <tt>PhotoStructure</tt>.
                </p>
                <p>
                  This information in aggregate is used to help prioritize
                  platform and feature support. It is not sold or shared for
                  marketing or advertising.
                </p>
                <p>
                  <a
                    href="https://forum.photostructure.com/t/new-in-v2023-10-automated-photostructure-version-checking/1956"
                    target="_blank"
                    rel="noopener"
                    >Learn more about PhotoStructure updates</a
                  >.
                </p>
              </details>

              <%- include('_setting-override', { settingName: 'allowUserAgent',
              override: locals.settingOverrides.allowUserAgent }) %>

              <p>
                <label>
                  <input
                    id="allowUserAgentTrue"
                    name="allowUserAgent"
                    type="radio"
                    value="true"
                    <%= locals.allowUserAgent === true ? 'checked' : '' %>
                    <%= locals.settingOverrides.allowUserAgent != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-up"></i>
                  <b>Yes,</b> PhotoStructure may share installation information
                  with PhotoStructure, Inc.
                </label>
              </p>

              <p>
                <label>
                  <input
                    id="allowUserAgentFalse"
                    name="allowUserAgent"
                    type="radio"
                    value="false"
                    <%= locals.allowUserAgent === false ? 'checked' : '' %>
                    <%= locals.settingOverrides.allowUserAgent != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-down"></i>
                  <b>No thanks,</b> do not share any installation information.
                </label>
              </p>

              <h3>Error reports</h3>
              <p>
                PhotoStructure's error reports help us detect, triage, and fix
                issues.
                <a
                  href="https://photostructure.com/guide/error-reports/"
                  target="_blank"
                  rel="noopener"
                  >Learn more</a
                >.
              </p>

              <%- include('_setting-override', { settingName: 'reportErrors',
              override: locals.settingOverrides.reportErrors }) %>

              <p>
                <label>
                  <input
                    id="reportErrorsYes"
                    name="reportErrors"
                    type="radio"
                    value="true"
                    <%= locals.reportErrors ? 'checked' : '' %>
                    <%= locals.settingOverrides.reportErrors != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-up"></i>
                  <b>Yes,</b> PhotoStructure may report unexpected errors.
                </label>
              </p>

              <p>
                <label>
                  <input
                    id="reportErrorsNo"
                    name="reportErrors"
                    type="radio"
                    value="false"
                    <%= !locals.reportErrors ? 'checked' : '' %>
                    <%= locals.settingOverrides.reportErrors != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-down"></i>
                  <b>No thanks,</b> do not send any error reports.
                </label>
              </p>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section4" rel="prev">Back</a>
                <a
                  class="next btn-small"
                  href="#section10"
                  data-revealed-href="#<%= aggregationSection.id %>"
                  rel="next"
                  >Next</a
                >
              </div>
            </div>

            <div class="section advanced-reveal">
              <button type="button" class="btn-small" data-reveal-advanced>
                <i class="emj smol toolbox" aria-hidden="true"></i>
                Show advanced settings
              </button>
              <p><%= advancedSummary %></p>
            </div>

            <div
              id="<%= aggregationSection.id %>"
              class="section advanced hidden"
            >
              <h2>
                <i
                  class="emj med <%= aggregationSection.icon %>"
                  title="Dolly, the cloned sheep"
                  aria-hidden="true"
                ></i>
                <%= aggregationSection.title %>
              </h2>

              <details>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >How Strict, Default, and Lenient group your photos</span
                  >
                </summary>
                <p>
                  When PhotoStructure decides that two or more files represent
                  the same photo or video, it groups them together in the user
                  interface to make your browsing easier. This decision is made
                  after examining both image content as well as metadata like
                  the captured-at time and exposure information.
                </p>
                <ul>
                  <li>
                    <b>Strict:</b> Group only very close matches. More copies of
                    the same photo may appear separately.
                  </li>
                  <li>
                    <b>Default:</b> Group typical copies and resized versions.
                    Dates and other photo details help keep different shots
                    apart.
                  </li>
                  <li>
                    <b>Lenient:</b> Allow larger differences, such as color
                    edits or changed dates. This can also group different photos
                    that look alike. If you have backups from Google Photos and
                    other cloud services that modified your originals, pick this
                    option.
                  </li>
                </ul>
                <% if (locals.aggregationModeOptions.some(option => option.value
                === 'manual')) { %>
                <p>
                  <b>Manual</b> uses the custom matching rules saved for this
                  library. Leave it selected to keep your current rules.
                </p>
                <% } %>
                <p>
                  Changing this setting checks your existing photos and videos
                  again. Larger libraries take longer to finish.
                </p>
                <p>
                  Read more about
                  <a
                    href="https://photostructure.com/guide/what-do-you-mean-by-deduplicate/"
                    target="_blank"
                    rel="noopener noreferrer"
                    >deduplication</a
                  >.
                </p>
              </details>

              <div class="preview-resolution-control aggregation-mode-control">
                <label for="aggregationModeSlider"
                  >How should PhotoStructure deduplicate your media?</label
                >
                <%- include('_setting-override', { settingName:
                'aggregationMode', override:
                locals.settingOverrides.aggregationMode }) %> <% if
                (locals.aggregationHasAdvancedOverrides) { %>
                <p class="hint">
                  Your advanced aggregation settings override parts of this
                  mode.
                </p>
                <% } %>
                <input
                  type="hidden"
                  name="aggregationMode"
                  value="<%= locals.aggregationModeFileValue ?? '' %>"
                />
                <div class="preview-cache-profile-slider-shell">
                  <input
                    id="aggregationModeSlider"
                    type="range"
                    min="0"
                    max="<%= locals.aggregationModeOptions.length - 1 %>"
                    step="1"
                    value="<%= locals.aggregationModeIndex %>"
                    data-enum-setting
                    data-setting-name="aggregationMode"
                    <%= locals.settingOverrides.aggregationMode != null ? 'disabled' : '' %>
                  />
                  <div
                    class="preview-resolution-stops stops-<%= locals.aggregationModeOptions.length %>"
                  >
                    <% for (const [index, option] of
                    locals.aggregationModeOptions.entries()) { %>
                    <button
                      type="button"
                      data-enum-stop="<%= index %>"
                      data-enum-value="<%= option.value %>"
                      data-enum-label="<%= option.label %>"
                      data-enum-description="<%= option.description %>"
                      title="<%= option.description %>"
                      aria-pressed="false"
                    >
                      <span class="preview-resolution-stop-label"
                        ><%= option.label %></span
                      >
                    </button>
                    <% } %>
                  </div>
                </div>
              </div>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section7" rel="prev">Back</a>
                <a class="next btn-small" href="#section5" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= previewSection.id %>" class="section advanced hidden">
              <h2 id="preview-resolution-section">
                <i class="emj med <%= previewSection.icon %>"></i>
                <%= previewSection.title %>
              </h2>

              <p>
                PhotoStructure uses previews (smaller copies) of your photos and
                videos so your library loads quickly.
              </p>

              <%# This range is measured, not estimated. Watch the denominator:
              one video notch on examples/ is +56% of total preview disk, but 2x
              the MP4 bytes alone (135.6 vs 67.5 MB) -- see
              _done/20260710-preview-resolution-settings.md. Re-measured across
              all three sliders 2026-08-12. Re-measure before narrowing it. %>
              <p>
                Moving any slider one notch to the right uses more preview disk
                space — 10% more in some libraries, twice as much in others.
              </p>

              <p class="preview-rebuild-note">
                Changing any of these values rebuilds your preview cache the
                next time sync runs. Current previews keep working until their
                replacements are ready, but large libraries may take several
                days.
              </p>

              <details>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden"
                    >Toggle preview size information</span
                  >
                </summary>
                <p>
                  Your original photos and videos are never changed. Each
                  preview fits inside the size you pick, and a small photo is
                  never blown up to fill a larger one.
                </p>
                <p>
                  PhotoStructure keeps a few sizes of each photo and video:
                  small ones for the gallery, larger ones for when you open
                  something. <b>Browsing previews</b> sets how many in-between
                  sizes are kept, and how sharp the gallery thumbnails look.
                </p>
                <p>
                  Sizes up to 1440p are kept for both tall and wide screens. 4K
                  and larger are kept for wide screens only.
                </p>
                <p>
                  For real-world numbers, see
                  <a
                    href="https://photostructure.com/getting-started/how-much-disk-space-do-i-need-for-my-photostructure-library/"
                    target="_blank"
                    rel="noopener"
                    >how much disk space PhotoStructure needs</a
                  >.
                </p>

                <% if (locals.previewSavedValues.length > 0) { %>
                <div
                  class="preview-saved-values"
                  aria-label="Currently saved preview settings in settings.toml"
                >
                  <p class="preview-saved-values-heading">
                    <b>Currently saved</b>
                    <span>settings.toml</span>
                  </p>
                  <dl>
                    <% for (const saved of locals.previewSavedValues) { %>
                    <div data-preview-saved-value>
                      <dt><%= saved.label %></dt>
                      <dd><code><%= saved.value %></code></dd>
                    </div>
                    <% } %>
                  </dl>
                </div>
                <% } %>
              </details>

              <div class="preview-resolution-control">
                <label for="photoPreviewFitInsideSlider">
                  <b>📷 &nbsp; Photo size</b>
                </label>
                <p class="preview-resolution-note">
                  Set this to the highest-resolution display you’ll use to
                  browse your library.
                </p>
                <%- include('_setting-override', { settingName:
                'photoPreviewFitInside', override:
                locals.settingOverrides.photoPreviewFitInside }) %>
                <input
                  type="hidden"
                  name="photoPreviewFitInside"
                  value="<%= locals.photoPreviewFitInsideFileValue ?? '' %>"
                />
                <div class="preview-resolution-slider-shell">
                  <input
                    id="photoPreviewFitInsideSlider"
                    type="range"
                    min="0"
                    max="<%= locals.photoPreviewResolutionOptions.length - 1 %>"
                    step="1"
                    value="<%= locals.photoPreviewFitInsideIndex %>"
                    list="photoPreviewResolutionStops"
                    data-preview-resolution
                    data-setting-name="photoPreviewFitInside"
                    data-effective-value="<%= locals.photoPreviewFitInside %>"
                    <%= locals.settingOverrides.photoPreviewFitInside != null ?
                    'disabled' : '' %>
                  />
                  <div
                    class="preview-resolution-stops stops-<%= locals.photoPreviewResolutionOptions.length %>"
                  >
                    <% for (const [index, option] of
                    locals.photoPreviewResolutionOptions.entries()) { %>
                    <button
                      type="button"
                      data-resolution-stop="<%= index %>"
                      data-resolution-value="<%= option.normalizedFitInside %>"
                      data-resolution-label="<%= option.label %>"
                      data-resolution-description="<%= option.description %>"
                      <% if (option.saved) { %>
                      title="<%= option.title %>"
                      <% } else { %>
                      title="Set photo previews to <%= option.label %> (fit inside <%= option.fitInside %>)"
                      <% } %>
                      aria-pressed="false"
                    >
                      <span class="preview-resolution-stop-label"
                        ><%= option.label %></span
                      >
                      <span class="preview-resolution-stop-marks">
                        <% if (option.normalizedFitInside ===
                        locals.photoPreviewFitInsideDefault) { %>
                        <span class="preview-resolution-stop-mark default"
                          >default</span
                        >
                        <% } %> <% if (!option.saved &&
                        locals.photoPreviewFitInsideFileValue != null &&
                        locals.photoPreviewFitInsideFileValue !==
                        locals.photoPreviewFitInsideDefault &&
                        option.normalizedFitInside ===
                        locals.photoPreviewFitInsideFileValue) { %>
                        <span class="preview-resolution-stop-mark saved"
                          >saved</span
                        >
                        <% } %>
                      </span>
                    </button>
                    <% } %>
                  </div>
                  <output
                    for="photoPreviewFitInsideSlider"
                    data-resolution-output
                  ></output>
                </div>
              </div>

              <div class="preview-resolution-control">
                <label for="videoPreviewFitInsideSlider">
                  <b>🎬 &nbsp; Video size</b>
                </label>
                <p class="preview-resolution-note">
                  This sets both the still frame shown before a video starts and
                  the video PhotoStructure prepares for playback. Videos your
                  browser can play directly stream at their original size.
                </p>
                <%- include('_setting-override', { settingName:
                'videoPreviewFitInside', override:
                locals.settingOverrides.videoPreviewFitInside }) %>
                <input
                  type="hidden"
                  name="videoPreviewFitInside"
                  value="<%= locals.videoPreviewFitInsideFileValue ?? '' %>"
                />
                <div class="preview-resolution-slider-shell">
                  <input
                    id="videoPreviewFitInsideSlider"
                    type="range"
                    min="0"
                    max="<%= locals.videoPreviewResolutionOptions.length - 1 %>"
                    step="1"
                    value="<%= locals.videoPreviewFitInsideIndex %>"
                    list="videoPreviewResolutionStops"
                    data-preview-resolution
                    data-setting-name="videoPreviewFitInside"
                    data-effective-value="<%= locals.videoPreviewFitInside %>"
                    <%= locals.settingOverrides.videoPreviewFitInside != null ?
                    'disabled' : '' %>
                  />
                  <div
                    class="preview-resolution-stops stops-<%= locals.videoPreviewResolutionOptions.length %>"
                  >
                    <% for (const [index, option] of
                    locals.videoPreviewResolutionOptions.entries()) { %>
                    <button
                      type="button"
                      data-resolution-stop="<%= index %>"
                      data-resolution-value="<%= option.normalizedFitInside %>"
                      data-resolution-label="<%= option.label %>"
                      data-resolution-description="<%= option.description %>"
                      <% if (option.saved) { %>
                      title="<%= option.title %>"
                      <% } else { %>
                      title="Set video previews to <%= option.label %> (fit inside <%= option.fitInside %>)"
                      <% } %>
                      aria-pressed="false"
                    >
                      <span class="preview-resolution-stop-label"
                        ><%= option.label %></span
                      >
                      <span class="preview-resolution-stop-marks">
                        <% if (option.normalizedFitInside ===
                        locals.videoPreviewFitInsideDefault) { %>
                        <span class="preview-resolution-stop-mark default"
                          >default</span
                        >
                        <% } %> <% if (!option.saved &&
                        locals.videoPreviewFitInsideFileValue != null &&
                        locals.videoPreviewFitInsideFileValue !==
                        locals.videoPreviewFitInsideDefault &&
                        option.normalizedFitInside ===
                        locals.videoPreviewFitInsideFileValue) { %>
                        <span class="preview-resolution-stop-mark saved"
                          >saved</span
                        >
                        <% } %>
                      </span>
                    </button>
                    <% } %>
                  </div>
                  <output
                    for="videoPreviewFitInsideSlider"
                    data-resolution-output
                  ></output>
                </div>
              </div>

              <div
                class="preview-resolution-control preview-cache-profile-control"
              >
                <label for="previewCacheProfileSlider">
                  <b>🏄 &nbsp; Browsing previews</b>
                </label>
                <p>
                  Choose how much preview disk space PhotoStructure uses to keep
                  gallery thumbnails sharp and browsing responsive.
                </p>
                <%- include('_setting-override', { settingName:
                'previewCacheProfile', override:
                locals.settingOverrides.previewCacheProfile }) %> <% if
                (locals.previewPixelWastePctOverrideSource) { %>
                <p class="warn message advanced-preview-override">
                  <i class="emj warning"></i>
                  <%= locals.previewPixelWastePctOverrideSource %> sets the
                  advanced previewPixelWastePct setting to <%=
                  locals.previewPixelWastePct %>%, which overrides part of this
                  profile.
                </p>
                <% } %> <% if (locals.maxThumbnailLongEdgeOverrideSource) { %>
                <p class="warn message advanced-preview-override">
                  <i class="emj warning"></i>
                  <%= locals.maxThumbnailLongEdgeOverrideSource %> sets the
                  advanced maxThumbnailLongEdge setting to <%=
                  locals.maxThumbnailLongEdge %> px, which overrides part of
                  this profile.
                </p>
                <% } %>
                <input
                  type="hidden"
                  name="previewCacheProfile"
                  value="<%= locals.previewCacheProfileFileValue ?? '' %>"
                />
                <div class="preview-cache-profile-slider-shell">
                  <input
                    id="previewCacheProfileSlider"
                    type="range"
                    min="0"
                    max="<%= locals.previewCacheProfileOptions.length - 1 %>"
                    step="1"
                    value="<%= locals.previewCacheProfileIndex %>"
                    data-enum-setting
                    data-setting-name="previewCacheProfile"
                    <%= locals.settingOverrides.previewCacheProfile != null ?
                    'disabled' : '' %>
                  />
                  <div
                    class="preview-resolution-stops preview-cache-profile-stops stops-<%= locals.previewCacheProfileOptions.length %>"
                  >
                    <% for (const [index, option] of
                    locals.previewCacheProfileOptions.entries()) { %>
                    <button
                      type="button"
                      data-enum-stop="<%= index %>"
                      data-enum-value="<%= option.value %>"
                      data-enum-label="<%= option.label %>"
                      data-enum-description="<%= option.description %>"
                      title="<%= option.title %>"
                      aria-pressed="false"
                    >
                      <span class="preview-resolution-stop-label"
                        ><%= option.label %></span
                      >
                    </button>
                    <% } %>
                  </div>
                  <div class="preview-cache-profile-axis" aria-hidden="true">
                    <span>Use less disk</span>
                    <span>Sharper thumbnails, faster browsing</span>
                  </div>
                </div>
              </div>

              <datalist id="photoPreviewResolutionStops">
                <% for (const [index, option] of
                locals.photoPreviewResolutionOptions.entries()) { %>
                <option
                  value="<%= index %>"
                  label="<%= option.label %>"
                ></option>
                <% } %>
              </datalist>
              <datalist id="videoPreviewResolutionStops">
                <% for (const [index, option] of
                locals.videoPreviewResolutionOptions.entries()) { %>
                <option
                  value="<%= index %>"
                  label="<%= option.label %>"
                ></option>
                <% } %>
              </datalist>

              <div class="buttons card-nav">
                <a
                  class="back btn-small"
                  href="#<%= aggregationSection.id %>"
                  rel="prev"
                  >Back</a
                >
                <a class="next btn-small" href="#section6" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= updatesSection.id %>" class="section advanced hidden">
              <h2 id="update-check-section">
                <i class="emj med <%= updatesSection.icon %>"></i>
                <%= updatesSection.title %>
              </h2>

              <%- include('_setting-override', { settingName: 'autoUpdateCheck',
              override: locals.settingOverrides.autoUpdateCheck }) %>

              <p>
                <a
                  href="https://forum.photostructure.com/t/new-in-v2023-10-automated-photostructure-version-checking/1956"
                  target="_blank"
                  rel="noopener"
                  >Learn more about PhotoStructure updates</a
                >.
              </p>

              <p>
                <label>
                  <input
                    id="updateCheckDaily"
                    name="autoUpdateCheck"
                    type="radio"
                    value="true"
                    <%= locals.autoUpdateCheck === true ? 'checked' : '' %>
                    <%= locals.settingOverrides.autoUpdateCheck != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-up"></i>
                  <b>Yes,</b> PhotoStructure may check for updates automatically
                </label>
              </p>

              <p>
                <label>
                  <input
                    id="updateCheckNone"
                    name="autoUpdateCheck"
                    type="radio"
                    value="false"
                    <%= locals.autoUpdateCheck === false ? 'checked' : '' %>
                    <%= locals.settingOverrides.autoUpdateCheck != null ||
                    locals.externalRequestsDisabledSource != null ? 'disabled'
                    : '' %>
                  />
                  <i class="emj thumbs-down"></i>
                  <b>No thanks,</b> do not check for updates automatically
                </label>
              </p>

              <h3>Update channel</h3>
              <%- include('_setting-override', { settingName: 'updateChannel',
              override: locals.settingOverrides.updateChannel }) %>
              <p>
                <label>
                  <input
                    type="radio"
                    name="updateChannel"
                    value="beta"
                    <%= locals.updateChannel === 'beta' ? 'checked' : '' %>
                    <%= locals.settingOverrides.updateChannel != null ?
                    'disabled' : '' %>
                  />
                  <b>beta</b> — newer features, may have bugs
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="updateChannel"
                    value="stable"
                    <%= locals.updateChannel === 'stable' ? 'checked' : '' %>
                    <%= locals.settingOverrides.updateChannel != null ?
                    'disabled' : '' %>
                  />
                  <b>stable</b> — may have <em>fewer</em> bugs
                </label>
              </p>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section5" rel="prev">Back</a>
                <a class="next btn-small" href="#section9" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= loggingSection.id %>" class="section advanced hidden">
              <h2>
                <i class="emj med <%= loggingSection.icon %>"></i>
                <%= loggingSection.title %>
              </h2>

              <h3>Log detail level</h3>
              <%- include('_setting-override', { settingName: 'logLevel',
              override: locals.settingOverrides.logLevel }) %>
              <p>
                <label>
                  <input
                    type="radio"
                    name="logLevel"
                    value="fatal"
                    <%= locals.logLevel === 'fatal' ? 'checked' : '' %>
                    <%= locals.settingOverrides.logLevel != null ? 'disabled' :
                    '' %>
                  />
                  <b>fatal</b> — critical failures only
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="logLevel"
                    value="error"
                    <%= locals.logLevel === 'error' ? 'checked' : '' %>
                    <%= locals.settingOverrides.logLevel != null ? 'disabled' :
                    '' %>
                  />
                  <b>error</b> — errors only
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="logLevel"
                    value="warn"
                    <%= locals.logLevel === 'warn' ? 'checked' : '' %>
                    <%= locals.settingOverrides.logLevel != null ? 'disabled' :
                    '' %>
                  />
                  <b>warn</b> — recommended
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="logLevel"
                    value="info"
                    <%= locals.logLevel === 'info' ? 'checked' : '' %>
                    <%= locals.settingOverrides.logLevel != null ? 'disabled' :
                    '' %>
                  />
                  <b>info</b> — more detail
                </label>
              </p>
              <p>
                <label>
                  <input
                    type="radio"
                    name="logLevel"
                    value="debug"
                    <%= locals.logLevel === 'debug' ? 'checked' : '' %>
                    <%= locals.settingOverrides.logLevel != null ? 'disabled' :
                    '' %>
                  />
                  <b>debug</b> — very verbose, impacts performance
                </label>
              </p>

              <div class="buttons card-nav">
                <a class="back btn-small" href="#section6" rel="prev">Back</a>
                <a class="next btn-small" href="#section10" rel="next">Next</a>
              </div>
            </div>

            <div id="<%= licenseSection.id %>" class="section">
              <h2>
                <i class="emj med <%= licenseSection.icon %>"></i>
                <%= licenseSection.title %>
              </h2>

              <% if (locals.welcome) { %>
              <details open>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden">Toggle license agreement</span>
                </summary>
                <div class="eula"><%- include('eula.html') %></div>
              </details>
              <% } else { %>
              <details>
                <summary class="more-details" title="Click to toggle details">
                  <span class="visually-hidden">Toggle license agreement</span>
                </summary>
                <div class="eula"><%- include('eula.html') %></div>
              </details>
              <% } %> <% if (locals.welcome) { %>
              <p>
                <b>By clicking Start you agree to all terms of this license.</b>
              </p>
              <% } %>
              <div class="buttons card-nav">
                <a
                  class="back btn-small"
                  href="#section7"
                  data-revealed-href="#section9"
                  rel="prev"
                  >Back</a
                >
              </div>
            </div>

            <% if (locals.welcome) { %>
            <div class="buttons section">
              <button
                class="btn"
                type="submit"
                name="action"
                title="Accept the EULA and save settings"
              >
                Start
              </button>
            </div>
            <% } else { %>
            <footer
              class="settings-actions stickybottom"
              aria-label="Settings actions"
            >
              <div class="settings-actions-inner">
                <div class="settings-actions-content">
                  <p class="settings-actions-license">
                    By clicking Save, you agree to the
                    <a href="#section10">license agreement</a>.
                  </p>
                  <div class="settings-actions-buttons buttons">
                    <a
                      class="btn cancel"
                      href="/"
                      title="Don't save any changes made on this page and return home"
                      >Cancel</a
                    >
                    <button
                      class="btn"
                      type="submit"
                      name="action"
                      title="Accept the EULA and save settings"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        width="24"
                        height="24"
                        fill="#fff"
                      >
                        <path
                          d="m22 6.44v13.3q0 0.917-0.653 1.57t-1.57 0.653h-15.6q-0.917 0-1.57-0.653t-0.653-1.57v-15.6q0-0.917 0.653-1.57t1.57-0.653h13.3zm-2.22 0.944-3.17-3.17h-12.4v15.6h15.6zm-5.42 10.3q0.972-0.972 0.972-2.36t-0.972-2.36q-0.972-0.972-2.36-0.972-1.39 0-2.36 0.972-0.972 0.972-0.972 2.36t0.972 2.36q0.972 0.972 2.36 0.972 1.39 0 2.36-0.972zm-9.03-7.92h10v-4.44h-10zm-1.11-2.39v12.4-15.6z"
                        />
                      </svg>
                      Save
                    </button>
                  </div>
                </div>
              </div>
            </footer>
            <% } %>
          </div>

          <nav class="settings-toc section" aria-label="Settings sections">
            <ul>
              <% for (const section of settingsSections) { %> <% if (section ===
              advancedSections[0]) { %>
              <li class="advanced-reveal">
                <button type="button" data-reveal-advanced>
                  <i class="emj smol toolbox" aria-hidden="true"></i>
                  Advanced settings&hellip;
                </button>
              </li>
              <% } %>
              <li class="<%= section.advanced ? 'advanced hidden' : '' %>">
                <a href="#<%= section.id %>">
                  <i
                    class="emj smol <%= section.icon %>"
                    aria-hidden="true"
                  ></i>
                  <%= section.title %>
                </a>
              </li>
              <% } %>
            </ul>
          </nav>
        </form>
      </div>
    </main>

    <div class="modal hidden">
      <div class="scrim"></div>
      <div class="message">
        <h3>Saving...</h3>
        <div class="details">(this may take a minute)</div>
        <div class="loader">
          <svg
            class="spinner"
            viewBox="0 0 50 50"
            aria-hidden="true"
            focusable="false"
          >
            <g class="spinner-rotator">
              <circle class="spinner-indicator" cx="25" cy="25" r="20"></circle>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <script
      type="module"
      src="/app/settings.js<%= locals.cacheBuster ? '?_=' + locals.cacheBuster : '' %>"
      nonce="<%= locals.nonce %>"
    ></script>
    <% if (locals.subTier !== "lite" && !locals.subTrial) { %>
    <script src="/js/confetti.min.js" nonce="<%= locals.nonce %>"></script>
    <% } %>
  </body>
</html>
