{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6">
    <div class="mb-8">
        <h1 class="font-display text-4xl sm:text-5xl font-bold tracking-tight mb-2">
            <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
                My Notes
            </span>
        </h1>
        <p class="font-mono text-sm text-gray-400">You have uploaded {{ notes|length }} note(s)</p>
    </div>
    
    {% if notes %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for note in notes %}
        <div class="glass p-5 rounded-xl card-hover group cursor-pointer note-card" data-href="{{ url_for('notes.preview', id=note.id) }}" role="link" tabindex="0">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <h3 class="font-display text-lg font-bold mb-1 group-hover:text-blue-400 transition truncate">
                        {{ note.title }}
                    </h3>
                    <div class="flex gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-blue-500/20 border border-blue-500/50 rounded-md font-mono text-[10px]">
                            {{ note.subject.name }}
                        </span>
                        <span class="px-2 py-0.5 bg-purple-500/20 border border-purple-500/50 rounded-md font-mono text-[10px]">
                            {{ note.note_type.name }}
                        </span>
                    </div>
                </div>
            </div>
            
            {% if note.description %}
            <p class="font-mono text-xs text-gray-400 mb-3 line-clamp-2">{{ note.description }}</p>
            {% endif %}
            
            <div class="flex items-center gap-2 mb-3 font-mono text-[10px] text-gray-500">
                <span>{{ note.created_at.strftime('%b %d, %Y') }}</span>
            </div>
            
            <div class="flex gap-2">
                <a href="{{ url_for('notes.edit', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
                    Edit
                </a>
                <a href="{{ url_for('notes.share', id=note.id) }}" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 font-mono text-[10px] text-center hover:bg-white/10 transition">
                    Share
                </a>
                <form method="POST" action="{{ url_for('notes.delete', id=note.id) }}" class="flex-1">
                    <button type="submit" onclick="return confirm('Delete this note?')" class="w-full bg-red-500/20 border border-red-500/50 rounded-lg px-3 py-1.5 font-mono text-[10px] hover:bg-red-500/30 transition">
                        Delete
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="glass p-12 rounded-2xl text-center">
        <p class="font-mono text-gray-400 mb-6">You haven't uploaded any notes yet</p>
        <a href="{{ url_for('notes.upload') }}" class="inline-block btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow">
            Upload Your First Note
        </a>
    </div>
    {% endif %}
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const cards = document.querySelectorAll('.note-card[data-href]');
        cards.forEach((card) => {
            card.addEventListener('click', (event) => {
                if (event.target.closest('a, button, input, select, textarea, form, label')) {
                    return;
                }
                window.location.href = card.dataset.href;
            });
            card.addEventListener('keydown', (event) => {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    window.location.href = card.dataset.href;
                }
            });
        });
    });
</script>
{% endblock %}