{% load i18n %}
<section class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
    <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="message-square" class="w-5 h-5 text-blue"></i>
        {% trans "Notes" %}
    </h3>

    {% if request.user.is_authenticated %}
    <form method="post" action="{% url 'core:add_note' %}" class="mb-4">
        {% csrf_token %}
        <input type="hidden" name="content_type_id" value="{{ content_type_id }}">
        <input type="hidden" name="object_id" value="{{ object_id }}">
        <textarea name="note" rows="3"
            class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 resize-none text-sm mb-3"
            placeholder="{% trans 'Add a note...' %}" required></textarea>
        <div class="flex justify-end">
            <button type="submit" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition text-sm inline-flex items-center gap-2">
                <i data-lucide="plus-circle" class="w-4 h-4"></i>
                {% trans "Add Note" %}
            </button>
        </div>
    </form>
    {% endif %}

    {% if notes %}
    <div class="space-y-4">
        {% for note in notes %}
        <div class="border border-slate-100 rounded-xl p-4 bg-slate-50">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <div class="w-7 h-7 bg-navy rounded-full flex items-center justify-center text-white font-bold text-[10px]">
                        {% if note.created_by %}{{ note.created_by.first_name|first }}{{ note.created_by.last_name|first }}{% else %}?{% endif %}
                    </div>
                    <span class="text-sm font-semibold text-navy">
                        {% if note.created_by %}{{ note.created_by.get_full_name }}{% else %}{% trans "Unknown" %}{% endif %}
                    </span>
                </div>
                <span class="text-xs text-slate">{{ note.created_at|date:"M d, Y h:i A" }}</span>
            </div>
            <p class="text-sm text-slate-700 leading-relaxed pl-9">{{ note.note|linebreaksbr }}</p>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-8">
        <i data-lucide="message-square" class="w-12 h-12 mx-auto text-slate-300 mb-3"></i>
        <p class="text-slate text-sm">{% trans "No notes yet" %}</p>
    </div>
    {% endif %}
</section>