{% extends "layout.html" %}
{% block head %}
<h1 class="text-center">Search</h1>
{% endblock %}
{% block body %}
<div class="container">
    <form class="form-floating" action={{ url_for('index') }} method="get">
        <input name="search" type="keyword" class="form-control" id="floatingInputValue">
        <label for="floatingInputValue">Input with value</label>
        <button type="submit" class="btn btn-primary">Submit</button>
        <a href="{{ url_for('index') }}" class="btn btn-secondary">清空</a>
        <a href="{{ url_for('test') }}" class="btn btn-info">原測試頁面</a>
    </form>
    {% if search %}
    <h4 class="text-center">搜尋: {{ search }}</h4>
    {% endif %}
    <hr>
    <h3 class="text-center">Read json file (推特訊息格式)</h3>
    {% if search %}
    總共查詢到 {{ jsonLog['word'] }} 個符合的資料，共{{ jsonLog['char'] }}個字數，{{ jsonLog['sentence'] }}個句子 
    {% endif %}
    <table class="table table-bordered">
        <thead>
            <tr>
            <th scope="col">發文人</th>
            <th scope="col">訊息</th>
            <th scope="col">動作</th>
            </tr>
        </thead>
        <tbody>
            {% for data in jsonData %}
            <tr>
                <td>{{ data['username'] }}</td>
                <td><span>{{ data['tweet_text']|safe }}</span></td>
                <td><a href={{ data['twitter_url'] }}>檢視</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <br>
    <hr>
    <h3 class="text-center">Read xml file (W3Schools)</h3>
    {% if search %}
    總共查詢到 {{ xmlLog['word'] }} 個符合的資料，共{{ xmlLog['char'] }}個字數，{{ xmlLog['sentence'] }}個句子 
    {% endif %}
    <table class="table table-bordered">
        <thead>
            <tr>
            <th scope="col">分類</th>
            <th scope="col">書名</th>
            <th scope="col">描述</th>
            <th scope="col">作者</th>
            <th scope="col">年分</th>
            <th scope="col">價格</th>
            </tr>
        </thead>
        <tbody>
            {% for data in xmlData %}
            <tr>
                <td>{{ data['category'] }}</td>
                <td>{{ data['title'] }}</td>
                <td>{{ data['description']|safe }}</td>
                <td>{{ data['author'] }}</td>
                <td>{{ data['year'] }}</td>
                <td>{{ data['price'] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}