{% extends "main.html" %}
{%load static%}
{% block content %}

<div class="w-full xxlg1:w-[75%]">
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[30px] font-semibold">Notes</h1>

        <!-- FILTERING -->
        <div class="w-full py-3 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-end items-center">
            <button
                class="text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300 addNoteButton"
                data-modal-url="{% url 'addnotemodal' %}">Add
                Note</button>
        </div>

        <!-- NOTES -->
        <div class="w-full grid grid-cols-1 s:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-5 mt-5">
            {% for note in my_notes %}
            <div>
                <div class="w-full rounded-t-md px-3 py-2 flex justify-between items-center border-b border-white border-opacity-30"
                    style="background-color: {{note.color}}">
                    <p class="text-sm text-gray-500">{{ note.date|date:"F j, Y" }}</p>
                    <button
                        class="w-[30px] h-[30px] bg-white shadow-md rounded-md p-2 flex justify-center items-center cursor-pointer hover:scale-105 duration-300 transition-transform deleteNoteButton"
                        data-modal-url="{% url 'deletenotemodal' note.id %}" style="color: {{note.color}};">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
                <div class="h-[150px] shadow-md rounded-b-md p-5 cursor-pointer"
                    style="background-color: {{note.color}}" onclick="showModal('{{ note.text }}', '{{ note.color }}')">
                    <p class="text-sm text-gray-500 overflow-hidden"
                        style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
                        {{ note.text }}
                    </p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>


<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
            id="closeModalButton">
            <i class="fa fa-close"></i>
        </button>
        <iframe id="popupModalFrame" frameborder="0"></iframe>
    </div>
</div>

<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>


{% endblock content %}