{% extends 'base.html' %}
{% block title %}Notes · Mini Suite{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h1 class="h4 mb-0">Notes</h1>
  <a href="{{ url_for('notes.create') }}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>New Note
  </a>
</div>

<!-- Search Form -->
<div class="card mb-4">
  <div class="card-body">
    <form method="GET" class="row g-2">
      <div class="col-12 col-md-9">
        <input type="text" name="search" class="form-control" placeholder="Search notes..." value="{{ search }}">
      </div>
      <div class="col-12 col-md-3 d-grid">
        <button class="btn btn-outline-primary" type="submit">
          <i class="bi bi-search me-1"></i>Search
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Notes List -->
{% if notes.items %}
  <div class="row g-3">
    {% for note in notes.items %}
      <div class="col-md-6 col-lg-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">{{ note.title }}</h5>
            <p class="card-text text-muted small">
              {{ note.content[:100] }}{% if note.content|length > 100 %}...{% endif %}
            </p>
            <p class="card-text">
              <small class="text-muted">
                Updated {{ note.updated_at.strftime('%b %d, %Y at %I:%M %p') }}
              </small>
            </p>
          </div>
          <div class="card-footer bg-transparent">
            <div class="btn-group w-100" role="group">
              <a href="{{ url_for('notes.view', id=note.id) }}" class="btn btn-outline-primary btn-sm">View</a>
              <a href="{{ url_for('notes.edit', id=note.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
              <form method="POST" action="{{ url_for('notes.delete', id=note.id) }}" class="d-inline" 
                    onsubmit="return confirm('Are you sure you want to delete this note?')">
                <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Pagination -->
  {% if notes.pages > 1 %}
    <nav aria-label="Notes pagination" class="mt-4">
      <ul class="pagination justify-content-center">
        {% if notes.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('notes.index', page=notes.prev_num, search=search) }}">Previous</a>
          </li>
        {% endif %}
        
        {% for page_num in notes.iter_pages() %}
          {% if page_num %}
            {% if page_num != notes.page %}
              <li class="page-item">
                <a class="page-link" href="{{ url_for('notes.index', page=page_num, search=search) }}">{{ page_num }}</a>
              </li>
            {% else %}
              <li class="page-item active">
                <span class="page-link">{{ page_num }}</span>
              </li>
            {% endif %}
          {% else %}
            <li class="page-item disabled">
              <span class="page-link">...</span>
            </li>
          {% endif %}
        {% endfor %}
        
        {% if notes.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('notes.index', page=notes.next_num, search=search) }}">Next</a>
          </li>
        {% endif %}
      </ul>
    </nav>
  {% endif %}
{% else %}
  <div class="text-center py-5">
    <i class="bi bi-journal-text display-1 text-muted"></i>
    <h3 class="mt-3">No notes yet</h3>
    <p class="text-muted">Create your first note to get started.</p>
    <a href="{{ url_for('notes.create') }}" class="btn btn-primary">
      <i class="bi bi-plus-lg me-1"></i>Create Note
    </a>
  </div>
{% endif %}
{% endblock %}