<!doctype html>
<html>

<head>
    <title>{{ title }}</title>
    <link href="/static/css/w3.css" type="text/css" rel="stylesheet">
    <link href="/static/css/main.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>

<body>
    <div class="w3-bar w3-teal">
        <button class="w3-button" type="button" onclick="location.href='/ptt'">PTT
            Sententree</button>
        <button class="w3-button" type="button" onclick="location.href='/ptt_push'">推文Sententree</button>
        <button class="w3-button" type="button" onclick="location.href='/dcard_alpha'" style="color: darkseagreen;">DCard Sententree</button>
        <button class="w3-button w3-teal" type="button" onclick="location.href='/generalTxt'">泛用文字視覺化工具</button>
    </div>

    <div id="nodeTitle" class="nodeTitle hidden">
        <div id="nodeTitleContent"></div>
    </div>
    <div id="stopWordEditorLayer" class="info hidden">
        <div id="stopWordEditor">
            <h4 id="sweTitle" style="margin:10px; display: inline;">編輯停用詞</h4>
            <ul id="sweContainer" class="w3-ul w3-hoverable" style="margin-bottom: 10px;"></ul>
            <div>
                <input class="w3-input w3-border" style="width: 85%; display: inline;" type="text" id="newStopWord" placeholder="新增停用詞（以空白隔開）">
                <button class="general-button w3-right" type="button" id="confirm" style="background-color: #379; margin-left: 8px;" onclick="addStopWord()">新增</button>
            </div>
            <div id="sweButtons" style="margin: 20px 0px;">
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 10px" onclick="hideStopWordEditor(); sendRequest()">確認</button>
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 10px" onclick="downloadStopWord()">匯出停用詞</button>
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 10px" onclick="clearStopWord()">全部清除</button>
                <button class="general-button w3-right" type="button" id="confirm" style="background-color: #379; margin: 0px 20px" onclick="hideStopWordEditor()">返回</button>
            </div>
        </div>
    </div>
    <div id="idfEditorLayer" class="info hidden">
        <div id="idfEditor">
            <h4 id="ieTitle" style="margin:10px; display: inline;">編輯停用詞</h4>
            <div id='ieTableContainer'>
                <table id="ieContainer" class="w3-table w3-bordered w3-hoverable" style="margin-bottom: 10px;"></table>
            </div>
            <div>
                <input class="w3-input w3-border" style="width: 85%; display: inline;" type="text" id="idfTarget" placeholder="輸入單詞">
                <button class="general-button w3-right" type="button" id="confirm" style="background-color: #379; margin-left: 8px;" onclick="scrollIdfList()">移動</button>
            </div>
            <div id="ieButtons" style="margin: 20px 0px;">
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 10px" onclick="updateIdfTable(); hideIdfEditor(); destroyCurrentGraph(); buildSentetree()">確認</button>
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 10px" onclick="downloadIdfTable()">匯出頻率表</button>
                <button class="general-button w3-right" type="button" id="confirm" style="background-color: #379; margin: 0px 20px" onclick="hideIdfEditor()">返回</button>
            </div>
        </div>
    </div>
    <div id="titleListLayer" class="info hidden">
        <div id="titleList">
            <h2 id="titleListKeyword" style="margin:10px; display: inline;"></h2>
            <span id="titleListKeywordInfo"></span>
            <ul id="titleListContainer" class="w3-ul w3-hoverable"></ul>
            <div id="backButton" style="margin: 20px 0px;">
                <button class="general-button" type="button" id="confirm" style="background-color: #379; margin: 0px 20px" onclick="hideTitles()">返回</button>
                <button class="general-button" type="button" id="setToKeyword" style="background-color: #379; margin: 0px 20px">設為關鍵詞</button>
                <button class="general-button" type='button' id='addToStopwords' style='background-color: #379;margin: 0px 40px;position: absolute;right: 0px;'></button>
            </div>
        </div>
    </div>
    <div id="heading">
        <h2>{{title}}</h2>
        <p>SentenTree <a href="https://github.com/twitter/SentenTree">https://github.com/twitter/SentenTree</a></p>
        <p id="comment">本頁為Dcard Sententree的開發版本，目前只提供數篇文章回文的視覺化</p>
        <div id='postSelect'>
            <button class='w3-button w3-green' onclick="changeData(1)">心情——那天，姊姊差點殺了我</button>
            <button class='w3-button w3-green' onclick="changeData(2)">感情——叫男生起床</button>
            <button class='w3-button w3-green' onclick="changeData(3)">時事——12歲馬尾女童買文具，遭港警撲倒跨下壓身</button>
        </div>
        <div id='linkToPost' style="margin-top: 5px;">
            <button class="w3-button w3-blue" id='linkToPostButton'>原始文章連結</button>
        </div>
    </div>
    <div id="graphInfo"></div>
    <div id="graph">
        <div id="vis"></div>
    </div>
</body>
<script src="/static/node_modules/jquery/dist/jquery.js"></script>
<script src="/static/node_modules/jquery-ui-dist/jquery-ui.js"></script>
<script src="/static/node_modules/css-element-queries/src/ResizeSensor.js"></script>
<script src="/static/node_modules/sententree/dist/sententree-standalone.js"></script>
<script src="/static/node_modules/d3/build/d3.js"></script>
<script src="/static/js/loadIdfTable.js"></script>
<script src="/static/js/download.js"></script>
<script src="/static/js/dcard.js"></script>

</html>