{% extends "main/base.html" %}
{% block content %}
    
    <div id="main-headline">
        <h2>{{ category_obj.display_name }}</h2>
    </div>

    <div id="search">
        <input placeholder = "Search..." type="text" id="searchBar" onkeydown="search()" onkeyup="search()" onchange="search()">
    </div>

    <div id="list">
        {% for topic in topics %}
        <div class="list-item" onclick="openTopic('{{ topic.title }}')">
            <!--<img src="c_icon.png"/>-->
            <p>{{ topic.title }}</p>
            <small style="display:none;">{{ topic.tags }}</small>
        </div>
        {% endfor %}
    </div>   

    <script>
        function search(){
            var input = document.getElementById("searchBar");
            var items = document.getElementsByClassName("list-item");

            for (let index = 0; index < items.length; index++) {
                const item = items  [index];
                const p = item.getElementsByTagName("p")[0];
                const tags = item.getElementsByTagName("small")[0].innerHTML;
                var value = input.value.toLowerCase().replace(".", "").replace(";", "").replace(",", "").replace(" ", "")

                item.style.display = "none";
                
                if(p.innerHTML.toLowerCase().includes(value) || tags.toLowerCase().includes(value)){
                    item.style.display = "block";
                }

            }
        }

        function openTopic(topic){
            window.open("/topic/{{ category_obj.title }}/" + topic, "_self");
        }
    </script>
{% endblock content %}