{% extends 'diary/base.html' %}
{% block title %}My Diary — All Entries{% endblock %}
{% block content %}
<div class="page-header">
  <h1>My Diary</h1>
  <p class="subtitle">{{ entries.count }} entr{{ entries.count|pluralize:"y,ies" }}</p>
</div>
<div class="search-bar">
  <form method="get" class="search-form">
    <input type="text" name="q" value="{{ query }}" placeholder="Search entries…" class="input">
    <select name="mood" class="input select-input">
      <option value="">All moods</option>
      {% for val, label in mood_choices %}
        <option value="{{ val }}" {% if mood_filter == val %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn btn-primary">Search</button>
    {% if query or mood_filter %}
      <a href="{% url 'entry_list' %}" class="btn btn-ghost">Clear</a>
    {% endif %}
  </form>
</div>
{% if entries %}
  <div class="entries-grid">
    {% for entry in entries %}
      <a href="{% url 'entry_detail' entry.pk %}" class="entry-card">
        <div class="entry-card-header">
          <span class="mood-badge">{{ entry.get_mood_display }}</span>
          <span class="entry-date">{{ entry.created_at|date:"M d, Y" }}</span>
        </div>
        <h2 class="entry-title">{{ entry.title }}</h2>
        <p class="entry-excerpt">{{ entry.content|truncatechars:120 }}</p>
      </a>
    {% endfor %}
  </div>
{% else %}
  <div class="empty-state">
    <p class="empty-icon">📓</p>
    <p>No entries yet. <a href="{% url 'entry_create' %}">Write your first one!</a></p>
  </div>
{% endif %}
{% endblock %}