<!-- Post Layout -->
<div class="container mx-auto px-4 py-8">

    <!-- Main Article -->
    <article class="card bg-base-100 shadow-xl">
      <div class="card-body p-8">
        <!-- Article Header -->
        <header class="mb-8 border-b border-base-300 pb-6">
          <h1 class="text-2xl font-bold mb-4 text-base-content leading-tight">
            <%= page.title %>
          </h1>
          
          <!-- Meta Information -->
          <div class="flex flex-wrap items-center gap-4 text-sm opacity-75 mb-4">
            <div class="flex items-center gap-1">
              <i class="fa-solid fa-calendar"></i>
              <time datetime="<%= page.date.format('YYYY-MM-DD') %>">
                <%= page.date.format('MMMM DD, YYYY') %>
              </time>
            </div>
            
            <div class="flex items-center gap-1">
              <i class="fa-solid fa-clock"></i>
              <span><%= Math.ceil(strip_html(page.content).length / 250) %> min read</span>
            </div>
          </div>

          <!-- Categories and Tags -->
          <div class="flex flex-wrap gap-2">
            <% if (page.categories && page.categories.length > 0) { %>
              <% page.categories.forEach(function(category) { %>
                <a href="<%= url_for('/notes/') %>?category=<%= encodeURIComponent(category.name) %>" class="badge badge-primary hover:badge-primary-focus transition-colors">
                  <%= category.name %>
                </a>
              <% }); %>
            <% } %>
            
            <% if (page.tags && page.tags.length > 0) { %>
              <% page.tags.forEach(function(tag) { %>
                <a href="<%= url_for('/notes/') %>?tag=<%= encodeURIComponent(tag.name) %>" class="badge badge-outline hover:badge-primary transition-colors">
                  #<%= tag.name %>
                </a>
              <% }); %>
            <% } %>
          </div>
        </header>

        <!-- Article Content -->
        <div class="post-content">
          <!-- Enhanced Prose Styles -->
          <style>
            /* ========== 基础文章容器样式 ========== */
            /* 文章主容器：设置整体行高和字体大小 */
            .post-content {
              line-height: 1.2;           /* 紧凑的行高 */
              font-size: 1.1rem;          /* 稍大的基础字体 */
            }
            
            /* ========== 标题元素样式 ========== */
            /* 所有标题的通用样式：颜色、粗细、边距、行高 */
            .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
              color: hsl(var(--bc));      /* 使用主题基础内容颜色 */
              font-weight: 700;           /* 粗体 */
              margin-top: 2rem;           /* 上边距 */
              margin-bottom: 1rem;        /* 下边距 */
              line-height: 1.3;           /* 标题专用行高 */
            }
            
            /* 各级标题的字体大小 */
            .post-content h1 { font-size: 1.5rem; }    /* 一级标题：24px */
            .post-content h2 { font-size: 1.25rem; }   /* 二级标题：20px */
            .post-content h3 { font-size: 1.125rem; }  /* 三级标题：18px */
            .post-content h4 { font-size: 1rem; }      /* 四级标题：16px */
            .post-content h5 { font-size: 0.875rem; }  /* 五级标题：14px */
            .post-content h6 { font-size: 0.8rem; }    /* 六级标题：12.8px */
            
            /* ========== 段落和文本样式 ========== */
            /* 段落元素：颜色和下边距 */
            .post-content p {
              color: hsl(var(--bc));      /* 使用主题基础内容颜色 */
              margin-bottom: 1.5rem;      /* 段落间距 */
            }
            
            /* 粗体文本：strong 和 b 标签 */
            .post-content strong, .post-content b {
              color: hsl(var(--bc));      /* 使用主题基础内容颜色 */
              font-weight: 600;           /* 半粗体 */
            }
            
            /* 斜体文本：em 和 i 标签 */
            .post-content em, .post-content i {
              font-style: italic;         /* 斜体样式 */
            }
            
            /* ========== 代码块样式 ========== */
            /* DaisyUI mockup-code 组件：代码块容器 */
            .post-content .mockup-code {
              margin: 1.5rem 0;           /* 上下边距 */
              font-size: 1rem;            /* 代码字体大小 */
            }
            
            /* mockup-code 内的 pre 元素：预格式化文本容器 */
            .post-content .mockup-code pre {
              white-space: pre-wrap;      /* 保持空白，允许换行 */
              word-wrap: break-word;      /* 长单词换行 */
              overflow-wrap: break-word;  /* 溢出换行 */
              line-height: 0;             /* 行高：0（行与行之间无间距） */
              margin: 0;                  /* 上下边距：0 */
            }
            
            /* mockup-code 内的 code 元素：代码文本 */
            .post-content .mockup-code code {
              white-space: pre-wrap;      /* 保持空白，允许换行 */
              word-wrap: break-word;      /* 长单词换行 */
              overflow-wrap: break-word;  /* 溢出换行 */
            }
            
            /* 隐藏原始的语法高亮容器：避免样式冲突 */
            .post-content .highlight {
              display: none;              /* 完全隐藏 */
            }
            
            /* 行内代码样式：`code` 标签 */
            .post-content code {
              background-color: hsl(var(--n) / 0.08);  /* 半透明中性色背景 */
              color: hsl(var(--bc));                    /* 基础内容颜色 */
              padding: 0.2rem 0.4rem;                   /* 内边距 */
              border-radius: 0.25rem;                   /* 圆角 */
              font-size: 0.875rem;                      /* 字体大小 14px */
              border: 1px solid hsl(var(--b3));        /* 边框 */
            }
            
            /* 重置 mockup-code 内代码的样式：避免嵌套样式冲突 */
            .post-content .mockup-code code {
              background: none;           /* 移除背景 */
              border: none;               /* 移除边框 */
              padding: 0;                 /* 移除内边距 */
              font-size: inherit;         /* 继承父元素字体大小 */
              line-height: 1;             /* 行高：0（行与行之间无间距） */
              margin: 0;                  /* 上下边距：0 */
            }
            
            /* ========== 引用块样式 ========== */
            /* blockquote 元素：引用文本块 */
            .post-content blockquote {
              border: 2px solid hsl(var(--b3));        /* 整体边框：边框色 */
              border-left: 4px solid hsl(var(--p));    /* 左边框加粗：主色调 */
              background-color: hsl(var(--n) / 0.03);  /* 背景：半透明中性色 */
              padding: 1rem 1.5rem;                    /* 内边距 */
              margin: 1.5rem 0;                        /* 上下边距 */
              font-style: italic;                      /* 斜体文字 */
              color: hsl(var(--bc));                   /* 基础内容颜色 */
              border-radius: 0.5rem;                   /* 圆角 */
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            }
            
            /* ========== 列表样式 ========== */
            /* 无序列表和有序列表的通用样式 */
            .post-content ul, .post-content ol {
              margin: 1.5rem 0;          /* 上下边距 */
              padding-left: 2rem;        /* 左侧缩进 */
            }
            
            /* 列表项样式：li 元素 */
            .post-content li {
              color: hsl(var(--bc));     /* 基础内容颜色 */
              margin-bottom: 0.5rem;     /* 列表项间距 */
            }
            
            /* 无序列表标记：实心圆点 */
            .post-content ul {
              list-style-type: disc;     /* 圆点标记 */
            }
            
            /* 有序列表标记：数字 */
            .post-content ol {
              list-style-type: decimal;  /* 数字标记 */
            }
            
            /* ========== 链接样式 ========== */
            /* 链接元素：a 标签的默认状态 */
            .post-content a {
              color: hsl(var(--p));               /* 主色调 */
              text-decoration: underline;         /* 下划线 */
              text-decoration-thickness: 1px;     /* 下划线粗细 */
              text-underline-offset: 2px;         /* 下划线偏移距离 */
              transition: all 0.2s ease;          /* 平滑过渡效果 */
            }
            
            /* 链接悬停状态：鼠标悬停时的样式 */
            .post-content a:hover {
              color: hsl(var(--pf));              /* 主色调焦点色 */
              text-decoration-thickness: 2px;     /* 下划线变粗 */
            }
            
            /* ========== 表格样式 ========== */
            /* 表格容器：table 元素 */
            .post-content table {
              width: 100%;                        /* 全宽 */
              margin: 1.5rem 0;                  /* 上下边距 */
              border-collapse: collapse;          /* 边框合并 */
              border-radius: 0.5rem;              /* 圆角 */
              overflow: hidden;                   /* 隐藏溢出（实现圆角效果） */
              border: 2px solid hsl(var(--b3));  /* 整体边框 */
              border-left: 4px solid hsl(var(--p)); /* 左边框加粗：主色调 */
              background-color: hsl(var(--b2) / 0.3); /* 背景：半透明基础色 */
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            }
            
            /* 表头单元格：th 元素 */
            .post-content th {
              background-color: hsl(var(--b2));   /* 基础色背景 */
              font-weight: 600;                   /* 半粗体 */
              padding: 0.75rem 1rem;              /* 内边距 */
              text-align: left;                   /* 左对齐 */
              color: hsl(var(--bc));              /* 基础内容颜色 */
              border-bottom: 1px solid hsl(var(--bc)); /* 下边框 */
              border-right: 1px solid hsl(var(--bc));  /* 右边框 */
            }
            
            /* 表头最后一列：移除右边框 */
            .post-content th:last-child {
              border-right: none;                 /* 移除右边框 */
            }
            
            /* 表格数据单元格：td 元素 */
            .post-content td {
              padding: 0.75rem 1rem;              /* 内边距 */
              color: hsl(var(--bc));              /* 基础内容颜色 */
              border-bottom: 1px solid hsl(var(--bc)); /* 下边框 */
              border-right: 1px solid hsl(var(--bc));  /* 右边框 */
            }
            
            /* 数据单元格最后一列：移除右边框 */
            .post-content td:last-child {
              border-right: none;                 /* 移除右边框 */
            }
            
            /* 表格奇偶行样式：偶数行背景色 */
            .post-content tbody tr:nth-child(even) {
              background-color: hsl(var(--b2) / 0.5); /* 半透明基础色背景 */
            }
            
            /* 表格行悬停效果：鼠标悬停时的背景色 */
            .post-content tbody tr:hover {
              background-color: hsl(var(--b2));   /* 基础色背景 */
            }
            
            /* 表格最后一行：移除下边框 */
            .post-content tbody tr:last-child td {
              border-bottom: none;                /* 移除下边框 */
            }
            
            /* ========== 图片样式 ========== */
            /* 图片元素：img 标签样式 */
            .post-content img {
              max-width: 100%;                    /* 最大宽度：响应式 */
              height: auto;                       /* 自动高度：保持比例 */
              border-radius: 0.5rem;              /* 圆角 */
              margin: 1.5rem 0;                  /* 上下边距 */
              box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            }
            
            /* ========== 分割线样式 ========== */
            /* 分割线元素：hr 标签 */
            .post-content hr {
              border: none;                       /* 移除默认边框 */
              height: 1px;                        /* 高度 */
              background-color: hsl(var(--b3));   /* 背景色：基础色 */
              margin: 2rem 0;                     /* 上下边距 */
            }
            
            /* ========== 数学公式样式 ========== */
            /* MathJax 通用样式：数学公式容器（v2兼容） */
            .post-content .MathJax {
              font-size: 1.1em !important;       /* 字体大小：略大于正文 */
            }
            
            /* MathJax v3 容器：行内数学公式 */
            .post-content mjx-container {
              margin: 0.5rem 0;                  /* 上下边距 */
            }
            
            /* MathJax v3 块级容器：display="true" 属性的公式 */
            .post-content mjx-container[display="true"] {
              margin: 1.5rem 0;                  /* 上下边距 */
              text-align: center;                /* 居中对齐 */
            }
            
            /* 包含块级数学公式的段落：:has() 伪类选择器 */
            .post-content p:has(mjx-container[display="true"]) {
              text-align: center;                /* 居中对齐 */
              line-height: 1;                    /* 行高：紧密排列 */
            }
            
            /* 自定义数学显示容器：.math-display 类 */
            .math-display {
              text-align: center;                /* 居中对齐 */
              margin: 1.5rem 0;                 /* 上下边距 */
            }
            
            /* ========== 特殊元素样式修复 ========== */
            /* 标题中的行内代码：h1-h6 标题内的 code 元素 */
            .post-content h1 code, .post-content h2 code, .post-content h3 code, 
            .post-content h4 code, .post-content h5 code, .post-content h6 code {
              font-size: 0.85em;                 /* 字体大小：相对于标题字体的85% */
              background-color: hsl(var(--b2));  /* 背景色：基础色 */
              padding: 0.2rem 0.4rem;            /* 内边距 */
            }
          </style>
          
          <div id="raw-content" style="display: none;"><%- page.content %></div>
          <div id="processed-content"></div>
          
          <script>
            document.addEventListener('DOMContentLoaded', function() {
              const rawContent = document.getElementById('raw-content').innerHTML;
              const processedContent = document.getElementById('processed-content');
              
              // 处理数学公式：先处理完整的单行公式，再处理多行公式
              let cleanedContent = rawContent;
              
              // 1. 处理单行公式：<p>$$formula$$</p>
              cleanedContent = cleanedContent.replace(/<p>\s*\$\$([\s\S]*?)\$\$\s*<\/p>/g, function(match, formula) {
                return '<div class="math-display">$$' + formula.trim() + '$$</div>';
              });
              
              // 2. 处理多行公式：<p>$$</p>...content...<p>$$</p>
              cleanedContent = cleanedContent.replace(/<p>\s*\$\$\s*<\/p>([\s\S]*?)<p>\s*\$\$\s*<\/p>/g, function(match, content) {
                // 清理content中的HTML标签，只保留纯文本内容
                const cleanContent = content.replace(/<\/?p[^>]*>/g, '\n').replace(/\n+/g, '\n').trim();
                return '<div class="math-display">$$\n' + cleanContent + '\n$$</div>';
              });
              
              // 3. 清理剩余的单独 $$ 行（防止遗漏）
              cleanedContent = cleanedContent.replace(/<p>\s*\$\$\s*<\/p>/g, '');
              
              processedContent.innerHTML = cleanedContent;
              
              // 重新初始化 MathJax
              if (window.MathJax) {
                MathJax.typesetPromise([processedContent]).catch(function (err) {
                  console.log('MathJax typeset failed: ' + err.message);
                });
              }
            });
          </script>
        </div>

        <!-- Tags Footer -->
        <% if (page.tags && page.tags.length > 0) { %>
          <footer class="mt-8 pt-6 border-t border-base-300">
            <div class="flex flex-wrap gap-2 items-center">
              <span class="text-sm font-medium opacity-70">Tags:</span>
              <% page.tags.forEach(function(tag) { %>
                <a href="<%= url_for('/notes/') %>?tag=<%= encodeURIComponent(tag.name) %>" class="badge badge-ghost hover:badge-primary transition-colors">
                  #<%= tag.name %>
                </a>
              <% }); %>
            </div>
          </footer>
        <% } %>
      </div>
    </article>

    <!-- Post Footer -->
    <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Share Section -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body p-6">
          <h3 class="card-title mb-4">Share this post</h3>
          <div class="flex flex-wrap gap-3">
            <a href="https://twitter.com/intent/tweet?text=<%= encodeURIComponent(page.title) %>&url=<%= encodeURIComponent(config.url + url_for(page.path)) %>" 
               target="_blank" rel="noopener" class="btn btn-sm btn-primary">
              <i class="fa-brands fa-twitter"></i>
              X (Twitter)
            </a>
            
            <a href="https://www.linkedin.com/sharing/share-offsite/?url=<%= encodeURIComponent(config.url + url_for(page.path)) %>" 
               target="_blank" rel="noopener" class="btn btn-sm btn-info">
              <i class="fa-brands fa-linkedin"></i>
              LinkedIn
            </a>
            
            <button onclick="copyToClipboard()" class="btn btn-sm btn-outline">
              <i class="fa-solid fa-copy"></i>
              Copy Link
            </button>
          </div>
        </div>
      </div>

      <!-- Navigation Section -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body p-6">
          <h3 class="card-title mb-4">Navigation</h3>
          <div class="space-y-3">
            <a href="<%= url_for('/notes/') %>" class="btn btn-sm btn btn-outline w-full justify-start">
              <i class="fa-solid fa-folder-tree"></i>
              All Notes
            </a>
            
            <% if (page.categories && page.categories.length > 0) { %>
              <a href="<%= url_for('/notes/') %>?category=<%= page.categories.toArray()[0].name %>" class="btn btn-sm btn btn-outline w-full justify-start">
                <i class="fa-solid fa-layer-group"></i>
                <%= page.categories.toArray()[0].name %> Posts
              </a>
            <% } %>
          </div>
        </div>
      </div>
    </div>

    <!-- Previous/Next Navigation -->
    <% if (page.prev || page.next) { %>
      <nav class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <% if (page.prev) { %>
          <a href="<%= url_for(page.prev.path) %>" class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 group">
            <div class="card-body p-6">
              <div class="flex items-center gap-4">
                <i class="fa-solid fa-left-long"></i>
                <div class="flex-1 min-w-0">
                  <div class="text-xs opacity-60 mb-1">Previous Post</div>
                  <div class="font-semibold truncate"><%= page.prev.title %></div>
                </div>
              </div>
            </div>
          </a>
        <% } else { %>
          <div></div>
        <% } %>
        
        <% if (page.next) { %>
          <a href="<%= url_for(page.next.path) %>" class="card bg-base-100 shadow-lg hover:shadow-xl transition-all duration-300 group">
            <div class="card-body p-6">
              <div class="flex items-center gap-4">
                <div class="flex-1 min-w-0 text-right">
                  <div class="text-xs opacity-60 mb-1">Next Post</div>
                  <div class="font-semibold truncate"><%= page.next.title %></div>
                </div>
                <i class="fa-solid fa-right-long"></i>
              </div>
            </div>
          </a>
        <% } %>
      </nav>
    <% } %>
</div>

<script>
// Initialize post content when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Wait for math processing to complete, then transform code blocks
  setTimeout(function() {
    // Transform Hexo highlight.js code blocks to mockup-code style
    const processedContent = document.getElementById('processed-content');
    const highlightFigures = processedContent.querySelectorAll('figure.highlight');
  
  highlightFigures.forEach(function(figure) {
    // Extract all code lines from the table structure
    const codeLines = [];
    const lineSpans = figure.querySelectorAll('td.code .line');
    
    lineSpans.forEach(function(lineSpan) {
      // Get the text content of each line, preserving spaces
      let lineText = '';
      
      // Process all child nodes to preserve text and spaces
      for (let node of lineSpan.childNodes) {
        if (node.nodeType === Node.TEXT_NODE) {
          lineText += node.textContent;
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          lineText += node.textContent;
        }
      }
      
      codeLines.push(lineText);
    });
    
    // If we couldn't get lines from the table, try alternative method
    if (codeLines.length === 0) {
      const codeContent = figure.querySelector('td.code');
      if (codeContent) {
        const text = codeContent.textContent || codeContent.innerText;
        codeLines.push(...text.split('\n').filter(line => line.trim() !== ''));
      }
    }
    
    if (codeLines.length === 0) return; // Skip if no content
    
    // Create new mockup-code container
    const mockupCode = document.createElement('div');
    mockupCode.className = 'mockup-code bg-base-200 text-base-content w-full';
    
    // Build HTML string with line numbers
    let htmlContent = '';
    codeLines.forEach((line, index) => {
      const lineNumber = index + 1;
      const escapedLine = line
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
      
      // Detect special line types and add appropriate styling
      let className = '';
      const lowerLine = line.toLowerCase().trim();
      
      if (lowerLine.includes('error') || lowerLine.includes('exception') || lowerLine.includes('failed')) {
        className = ' class="bg-error text-error-content"';
      } else if (lowerLine.includes('warning') || lowerLine.includes('warn')) {
        className = ' class="bg-warning text-warning-content"';
      } else if (lowerLine.includes('success') || lowerLine.includes('done') || lowerLine.includes('completed')) {
        className = ' class="bg-success text-success-content"';
      } else if (lowerLine.includes('info') || lowerLine.includes('installing') || lowerLine.includes('loading')) {
        className = ' class="bg-info text-info-content"';
      }
      
      htmlContent += `<pre data-prefix="${lineNumber}"${className}><code>${escapedLine}</code></pre>`;
      if (index < codeLines.length - 1) {
        htmlContent += '\n';
      }
    });
    
    mockupCode.innerHTML = htmlContent;
    
    // Replace the original figure element
    figure.parentNode.replaceChild(mockupCode, figure);
  });
  
    // Also handle any remaining regular pre/code blocks
    const preBlocks = processedContent.querySelectorAll('pre:not(.mockup-code pre)');
    preBlocks.forEach(function(pre) {
      if (pre.closest('.mockup-code')) return; // Skip if already processed
      
      const codeElement = pre.querySelector('code') || pre;
      const text = codeElement.textContent || codeElement.innerText || '';
      const lines = text.split('\n').filter(line => line.trim() !== '');
      
      if (lines.length === 0) return;
      
      const mockupCode = document.createElement('div');
      mockupCode.className = 'mockup-code bg-base-200 text-base-content w-full';
      
      let htmlContent = '';
      lines.forEach((line, index) => {
        const lineNumber = index + 1;
        const escapedLine = line
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#39;');
        
        htmlContent += `<pre data-prefix="${lineNumber}"><code>${escapedLine}</code></pre>`;
        if (index < lines.length - 1) {
          htmlContent += '\n';
        }
      });
      
      mockupCode.innerHTML = htmlContent;
      pre.parentNode.replaceChild(mockupCode, pre);
    });
  }, 100); // 等待100ms确保数学公式处理完成
});

</script>

<script>
window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true,
    tags: 'ams'
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};
</script>

<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>