{% extends "base.html" %}
{% set title = "资源详情" %}
{% set page = "resource_detail" %}

{% block content %}
  <div id="resourceDetail" data-resource-id="{{ resource_id }}"></div>

  <div class="card resource-browser" style="margin-top:24px; box-shadow: var(--shadow-md); border-radius: 16px; overflow: hidden;">
    <div class="toolbar resource-browser-toolbar" style="padding: 16px 24px; background: var(--bg); border-bottom: 1px solid var(--border);">
      <select id="refSelect" class="input" style="max-width: 200px; border-radius: 8px;"></select>
      <button id="reloadRepo" class="btn" style="border-radius: 8px; display: flex; align-items: center; gap: 4px;"><i class="ri-refresh-line"></i> 刷新</button>
      <button id="downloadBtn" class="btn btn-primary" style="border-radius: 8px; display: flex; align-items: center; gap: 4px;"><i class="ri-download-cloud-2-line"></i> 下载源码</button>
    </div>
    <div id="breadcrumb" class="breadcrumb" style="padding: 12px 24px; background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--border); margin: 0; font-size: 0.95rem;"></div>
    <div class="split" style="gap: 0; min-height: 500px;">
      <div style="border-right: 1px solid var(--border); background: var(--bg);">
        <div class="section-title" style="padding: 16px 24px; margin: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px;"><i class="ri-folder-2-line" style="color: var(--brand);"></i> 目录结构</div>
        <div id="tree" class="list" style="padding: 8px;"></div>
      </div>
      <div style="background: #fafafa; position: relative;">
        <div class="section-title" style="padding: 16px 24px; margin: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; background: var(--bg);"><i class="ri-code-box-line" style="color: var(--brand);"></i> 文件预览</div>
        <div id="filePlaceholder" class="muted" style="position: absolute; left: 0; right: 0; top: 57px; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; pointer-events: none;">点击左侧文件预览</div>
        <pre id="fileContent" class="code" style="margin: 0; border-radius: 0; border: none; background: transparent; padding: 24px; min-height: calc(100% - 57px);"></pre>
      </div>
    </div>
  </div>

  <div id="resourceDescription"></div>

  <div id="repoModalBackdrop" class="modal-backdrop" style="display:none">
    <div class="modal">
      <div class="modal-header">
        <div id="repoModalTitle" class="modal-title"></div>
        <button id="repoModalClose" type="button" class="btn btn-ghost" style="padding: 4px; min-width: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;"><i class="ri-close-line" style="font-size: 1.25rem;"></i></button>
      </div>
      <div id="repoModalBody"></div>
      <div id="repoModalFooter" class="modal-footer"></div>
    </div>
  </div>
{% endblock %}