<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>$title</title>
<link rel="stylesheet" href="$prefix/static/style.css">
</head>
<body>
  <div class="wrap">
    <header class="header">
      <div>
        <h1 class="title">$title</h1>
        <p class="subtitle">文件目录</p>
      </div>
      <div class="meta">
        <span>路径<strong>$rel_display</strong></span>
        <span>目录<strong>$count_dirs</strong></span>
        <span>文件<strong>$count_files</strong></span>
      </div>
    </header>

    <div class="toolbar">
      <div class="path"><strong>当前目录</strong>$rel_display</div>
      <a class="action" href="$prefix/">根目录</a>
    </div>

    $content
    <div class="footer">$root_path</div>
  </div>

  <!-- 密码验证弹窗 -->
  <div class="pwd-overlay" id="pwd-overlay" aria-hidden="true">
    <div class="pwd-dialog" role="dialog" aria-modal="true" aria-label="密码验证">
      <p class="pwd-dialog-title">请输入访问密码</p>
      <div class="pwd-inputs" id="pwd-inputs">
        <input type="text" class="pwd-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off">
        <input type="text" class="pwd-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off">
        <input type="text" class="pwd-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off">
        <input type="text" class="pwd-digit" maxlength="1" inputmode="numeric" pattern="[0-9]" autocomplete="off">
      </div>
      <p class="pwd-error hidden" id="pwd-error">密码错误，请重试</p>
    </div>
  </div>

  <div class="preview-modal" id="preview-modal" aria-hidden="true">
    <div class="preview-dialog" id="preview-dialog" role="dialog" aria-modal="true" aria-labelledby="preview-title">
      <div class="preview-head">
        <div>
          <h2 class="preview-title" id="preview-title">预览</h2>
          <p class="preview-meta" id="preview-meta"></p>
        </div>
        <div class="preview-head-actions">
          <button class="preview-fullscreen" type="button" title="全屏" id="preview-fullscreen-btn">⛶</button>
          <button class="preview-close" type="button" aria-label="关闭预览" data-preview-close="true">×</button>
        </div>
      </div>
      <div class="preview-body">
        <div class="preview-empty hidden" id="preview-empty">选择文件后可在这里预览。</div>
        <div class="preview-stage" id="preview-image-stage">
          <div class="img-viewer" id="img-viewer">
            <div class="img-viewer-canvas" id="img-viewer-canvas">
              <img id="preview-image" alt="" draggable="false">
            </div>
            <div class="img-viewer-toolbar">
              <button title="缩小" data-action="zoom-out">−</button>
              <span class="img-viewer-zoom" id="img-zoom-label">100%</span>
              <button title="放大" data-action="zoom-in">+</button>
              <span class="img-viewer-sep"></span>
              <button title="逆时针旋转" data-action="rotate-left">↺</button>
              <button title="顺时针旋转" data-action="rotate-right">↻</button>
              <span class="img-viewer-sep"></span>
              <button title="适应屏幕" data-action="fit">⊡</button>
              <button title="原始大小" data-action="reset">1:1</button>
            </div>
          </div>
        </div>
        <div class="preview-stage" id="preview-video-stage">
          <video id="preview-video" controls playsinline></video>
        </div>
        <div class="preview-stage" id="preview-audio-stage">
          <audio id="preview-audio" controls></audio>
        </div>
        <div class="preview-stage" id="preview-iframe-stage">
          <iframe id="preview-iframe" title="文件预览"></iframe>
        </div>
        <div class="preview-stage" id="preview-markdown-stage">
          <div class="preview-markdown" id="preview-markdown"></div>
        </div>
        <div class="preview-stage" id="preview-code-stage">
          <pre class="preview-code" id="preview-code"></pre>
        </div>
        <div class="preview-stage" id="preview-plain-stage">
          <pre class="preview-plain" id="preview-plain"></pre>
        </div>
      </div>
    </div>
  </div>

<script src="$prefix/static/app.js"></script>
</body>
</html>
