<% if (theme.preloader.enable) { %>
  <div id='loader'>
    <div class="loading-left-bg loading-bg"></div>
    <div class="loading-right-bg loading-bg"></div>
    <div class="spinner-box">
      <div class="loading-taichi <%- theme.preloader.rotate ? 'rotate' : '' %>">
        <% if (theme.preloader.icon) { %>
          <img src="<%- url_for(theme.preloader.icon, {relative: false})%>" alt="loading" />
        <% } else { %>
          <svg width="150" height="150" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="https://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
            <path d="M303.5 432A80 80 0 0 1 291.5 592A80 80 0 0 1 303.5 432z" fill="var(--red-1, #ff5252)" />
            <path d="M512 65A447 447 0 0 1 512 959L512 929A417 417 0 0 0 512 95A417 417 0 0 0 512 929L512 959A447 447 0 0 1 512 65z 
           M512 95A417 417 0 0 1 929 512A208.5 208.5 0 0 1 720.5 720.5L720.5 592A80 80 0 0 0 720.5 432A80 80 0 0 0 720.5 592L720.5 720.5A208.5 208.5 0 0 1 512 512A208.5 208.5 0 0 0 303.5 303.5A208.5 208.5 0 0 0 95 512A417 417 0 0 1 512 95z" fill="var(--red-1, #ff5252)" />
          </svg>
        <% } %>
      </div>
      <% var preloaderText = theme.preloader.text; %>
      <% if (typeof preloaderText !== 'string') { %>
        <% preloaderText = preloaderText[post.lang]; %>
      <% } %>
      <div class="loading-word"><%= preloaderText %></div>
    </div>
  </div>
  </div>
  <script>
    var time = null;
    var startLoading = () => {
      time = Date.now();
      document.getElementById('loader').classList.remove("loading");
    }
    var endLoading = () => {
      if (!time) {
        document.body.style.overflow = 'auto';
        document.getElementById('loader').classList.add("loading");
      } else {
        if (Date.now() - time > 500) {
          time = null;
          document.body.style.overflow = 'auto';
          document.getElementById('loader').classList.add("loading");
        } else {
          setTimeout(endLoading, 500 - (Date.now() - time));
          time = null;
        }
      }
    }
    window.addEventListener('DOMContentLoaded', endLoading);
    document.getElementById('loader').addEventListener('click', endLoading);
  </script>
<% } %>
<div id="copy-tooltip" style="pointer-events: none; opacity: 0; transition: all 0.2s ease; position: fixed;top: 50%;left: 50%;z-index: 999;transform: translate(-50%, -50%);color: white;background: rgba(0, 0, 0, 0.5);padding: 10px 15px;border-radius: 10px;">
</div>

<% if (theme.service_worker.enable) { %>
  <div class="notification-wrapper">
    <h1><%= __("service_worker.title") %></h1>
    <p><%= __("service_worker.content") %></p>
    <div class="notification-btn">
      <button id="notification-update-btn"><%= __("service_worker.confirm") %></button>
      <button id="notification-close-btn"><%= __("service_worker.cancel") %></button>
    </div>
  </div>
<% } %>