{% include 'header.html' %}
            
            <div class="block md:flex justify-between items-center px-4 text-center border-b-2">
                <div class="m-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
                    <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
                    <h1> {{name}} </h1>
                </div>
                
                <div class="m-2">
                    <form class="">
                        <input class="border rounded-full px-4 py-2 border-indigo-500 placeholder-indigo-500 text-indigo-500 outline-none" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
                    </form>
                </div>
                
            </div>
            
            {% if item_list %}

                <div class="mx-auto my-2 w-full px-4">
                    <div class="block md:flex md:flex-wrap md:justify-center text-center break-all">
                    {% for item in item_list %}
                        <a title="{% if item.media %} {{item.mime_type}} | {{item.size}} {% else %} Text message {% endif %}" href="{{item.url}}" class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
                    
                            {% if item.media %}
                                <img src="{{item.thumbnail}}" class="w-full rounded">
                                <div class="p-4 rounded">{{item.insight}}</div>
                            {% else %}
                                <div class="p-4 rounded">{{item.insight}}</div>
                            {% endif %}
                            
                        </a>
                    {% endfor %}
                    </div>
            
                </div>

                <p class="my-2 text-center font-semibold">
                    {{item_list|length}} items
                </p>
                
                <div class="mx-auto my-2 text-center flex text-white content-center justify-center">
                    {% if prev_page %}
                        <a title="Previous page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{prev_page.url}}">Page {{prev_page.no}}</a>
                    {% endif %}
                    <p class="mx-2 p-2 border rounded border-green-500 text-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white">Page {{cur_page}}</p>
                    {% if next_page %}
                        <a title="Next page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{next_page.url}}">Page {{next_page.no}}</a>
                    {% endif %}
                </div>
                
                <script>
                    const date_elements = document.getElementsByName('date');
                    date_elements.forEach((item) => {
                        let dataDate = item.getAttribute("data-date");
                        let date = new Date(dataDate);
                        item.innerHTML = date.toLocaleString()
                    });
                </script>
            
            {% else %}
                
                <p class="my-4 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
                    No message to display!
                </p>
            
            {% endif %}

{% include 'footer.html' %}