{% 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-[25px]">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="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}};">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px]">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                        </svg> 
                    </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>


{% endblock content %}