{% extends base %}

{% block head %}

<style type="text/css">
    .content {
        width: 100%;
        float: none;
    }

    label {
        float: left;
        width: 100px;
    }

    .url-input {
        width: 50rem;
        max-width: 100%;
    }

    .file-input {
        border: none;
    }

    .confirm-dialog-body input, .confirm-dialog-body select {
        width: 100%;
    }

</style>
{% end %}

{% block body %}

{% init url = "" %}
{% init error = "" %}
{% init address = "" %}
{% init images = [] %}
{% init scripts = [] %}
{% init texts = [] %}
{% init article_title = "" %}

<div class="col-md-12 card">
    {% set title = "导入网页" %}
    {% include common/base_title.html %}
</div>

<div class="card">
    <form method="POST" enctype="multipart/form-data">
        <p>
            <label>上传文件</label>
            <input type="file" name="file" class="file-input"/>
        </p>
        <p>
            <label>网址</label>
            <input type="text" name="url" class="url-input" value="{{url}}" />
        </p>
        <div>
            <input type="submit" class="btn" value="抓取网页"/>
            <input type="button" class="btn" value="保存到资料库" 
                data-url="{{_server_home}}/note/html_importer/form?action=edit"
                data-title="保存文档"
                onclick="xnote.handleSaveNote(this)">
        </div>
    </form>
</div>

<div style="color:red;">{{error}}</div>

<input type="hidden" id="articleTitle" value="{{article_title}}"/>
<div class="card">
    <h2 class="card-title">Markdown 文本</h2>
    <textarea rows="30" class="content" id="content">
    {% for text in texts%}{{text}}
    {% end %}
    </textarea>
</div>

<div class="card">
    <h2 class="card-title">纯文本</h2>
    <textarea rows="30" class="content" id="plainText">{{?plain_text}}</textarea>
    <div><button id="readText">阅读</button></div>
</div>

<div class="card">
    <h2 class="card-title">Images</h2>
    <textarea rows={{len(images)+2}} class="content">
    {% for image in images %}{{image}}
    {% end %}
    </textarea>
</div>

<div class="card">
    <h2 class="card-title">Scripts</h2>
    <textarea rows="{{len(scripts)+2}}" class="content">
    {% for script in scripts%}{{script}}
    {% end %}
    </textarea>
</div>

<div class="confirm-dialog hide">
    <div class="confirm-dialog-body card">
        <div class="row input-group-row">
            <label>笔记名称</label>
            <input type="text" name="name" value="${name}">
        </div>
    
        <div class="row top-offset-1 input-group-row">
            <label>{{T("笔记本")}}</label>
            <select name="parent_id">
                {%for item in groups %}
                    <option value="{{item.id}}">{{item.name}}</option>
                {% end %}
            </select>
        </div>
    </div>
</div>

{% include common/script/load_select2.html %}

<script type="text/javascript">
$("#readText").click(function () {
    $.post("/api/tts", {content: $("#plainText").text()}, function (resp) {

    });
});

xnote.handleSaveNote = function () {
    var articleTitle = $("#articleTitle").val();
    var params = {};
    params.action = "edit";
    params.title = articleTitle;
    params.content = $("#content").val();
    xnote.http.get("/note/html_importer/form", params, function (respHtml) {
        var options = {};
        options.title = "保存文档";
        options.html = respHtml;
        xnote.showDialogEx(options);
    });
}
</script>

{% end %}

{% block body_right %}
    {% include common/sidebar/default.html %}
{% end %}
