{% extends "base.html" %}
{% block title %}小说详情 - Novel Writer{% endblock %}

{% block content %}
<div id="ndAlerts"></div>
<div class="card mb-4" id="ndHeader">
    <div class="card-body text-muted">加载中…</div>
</div>

<ul class="nav nav-tabs" id="ndTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ndPaneChapters" type="button" role="tab">章节</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ndPaneCharacters" type="button" role="tab">角色</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ndPaneForeshadowing" type="button" role="tab">伏笔</button>
    </li>
</ul>

<div class="tab-content border border-top-0 rounded-bottom p-3">
    <div class="tab-pane fade show active" id="ndPaneChapters" role="tabpanel">
        <form class="row g-2 mb-3" id="ndAddChapterForm">
            <div class="col-auto"><input type="number" class="form-control" id="ndChVolume" value="1" min="1" title="卷" style="width:80px"></div>
            <div class="col-auto"><input type="number" class="form-control" id="ndChNumber" value="1" min="1" title="章节号" style="width:90px"></div>
            <div class="col-auto"><input type="text" class="form-control" id="ndChTitle" placeholder="章节标题"></div>
            <div class="col-auto"><input type="text" class="form-control" id="ndChOutline" placeholder="一句话大纲 (可选)" style="width:280px"></div>
            <div class="col-auto"><button type="submit" class="btn btn-outline-primary">添加章节</button></div>
        </form>
        <div id="ndChapterList" class="text-muted">加载中…</div>
    </div>
    <div class="tab-pane fade" id="ndPaneCharacters" role="tabpanel">
        <div id="ndCharacterList" class="text-muted">加载中…</div>
    </div>
    <div class="tab-pane fade" id="ndPaneForeshadowing" role="tabpanel">
        <div id="ndForeshadowingList" class="text-muted">加载中…</div>
    </div>
</div>

<script>window.NOVEL_ID = {{ novel_id }};</script>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('static', filename='js/pages/novel-detail.js') }}"></script>
{% endblock %}