{% extends 'base.html' %}

{% block title %}My Notes - PixelMinds{% endblock %}

{% block content %}
<div class="container mt-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>My Notes</h1>
    <a href="{% url 'core:note_create' %}" class="btn btn-primary">New Note</a>
  </div>
  <div class="row">
    {% for note in notes %}
    <div class="col-md-4 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title"><a href="{% url 'core:note_detail' note.pk %}">{{ note.title }}</a></h5>
          <p class="card-text">{{ note.content|truncatechars:100 }}</p>
          <p class="card-text"><small class="text-muted">Last updated: {{ note.updated_at|date:"F d, Y" }}</small></p>
          <a href="{% url 'core:note_update' note.pk %}" class="btn btn-sm btn-outline-secondary">Edit</a>
          <a href="{% url 'core:note_delete' note.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
        </div>
      </div>
    </div>
    {% empty %}
    <div class="col">
      <p>You don't have any notes yet. <a href="{% url 'core:note_create' %}">Create your first note!</a></p>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}
