{% extends 'base.html' %}
{% load static %}
{% load unicorn %}

{% block navbar_item %}
<a href="/admin" class="button is-primary">
    敏感词库维护
</a>
{% endblock %}

{% block content %}
		<div class="hero-body  p-b-30 ">
			<div class="container">
				<h2 class="subtitle">
					<span class="has-text-centered is-block">
						Sensitive Word Detection Tool for Documents
					</span>
				</h2>
				<h1 class="title">
					<span class="is-size-2 has-text-centered is-block">敏感词检测工具</span>
				</h1>
                <div class="container">
                  <div class="notification">
                      <span class="has-text-centered is-block">可批量上传，支持 .docx, .doc, .dot, .pptx, .ppt, .pdf, .xls, .xlsx, .txt(UTF-8) 格式文件</span>
                        <br>
                      <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                          <div class="columns">
                              <div class="column has-text-centered">
                                <div class="file is-boxed is-centered">
                                  <label class="file-label">
                                    {{ form.attachments }}
                                    <span class="file-cta">
                                      <span class="file-icon">
                                        <i class="fas fa-upload"></i>
                                      </span>
                                      <span class="file-label">
                                        选择文件
                                      </span>
                                    </span>
                                  </label>
                                </div>
                              </div>
                          </div>
                          <div class="columns">
                              <div class="column"></div>
                              <div class="is-centered column" id="file-list">


                              </div>
                              <div class="column"></div>
                          </div>


                          <br>
                          <div class="is-centered" style="text-align:center">
                              <input type="submit" value="提交" class="button is-link is-medium is-center">
                          </div>

                      </form>

                  </div>
                </div>

			</div>
		</div>


{% endblock %}

{% block script %}

{# show file name after file selected#}

        // 获取文件选择输入框和文件名显示容器
        const fileInput = document.getElementById('file-input');
        const fileListDiv = document.getElementById('file-list');

        // 添加事件监听器来处理文件选择
        fileInput.addEventListener('change', function() {
            // 获取所选文件列表
            const selectedFiles = fileInput.files;

            // 创建一个用于显示文件名的字符串
            let fileListText = '所选文件：<br>';

            // 遍历文件列表并添加文件名到字符串
            for (let i = 0; i < selectedFiles.length; i++) {
                const fileName = selectedFiles[i].name;
                fileListText += `${fileName}<br>`;
            }

            // 将文件名字符串插入到页面上的容器中
            fileListDiv.innerHTML = fileListText;
        });

{% endblock %}