{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<div class="subpage-shell">
  <div class="container py-5">
    {% if messages %}
    <div class="message-stack mb-4">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} custom-alert mb-0" role="alert">{{ message }}</div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="subpage-header glass-panel mb-4">
      <div>
        <span class="eyebrow">History</span>
        <h1>{% if is_demo_mode %}Demo momentum entries{% else %}Your momentum entries{% endif %}</h1>
        <p>{% if is_demo_mode %}Browse the seeded sample history, then create an account when you want private tracking.{% else %}Filter your private check-ins by category and open any one for its detail view.{% endif %}</p>
      </div>
      <div class="d-flex flex-wrap gap-2 align-items-center">
        <a class="btn btn-ghost" href="{% url 'home' %}">Back to dashboard</a>
        {% if request.user.is_authenticated %}
        <a class="btn btn-accent" href="{% url 'home' %}#check-in">New check-in</a>
        <form method="post" action="{% url 'logout' %}" class="inline-form">
          {% csrf_token %}
          <button class="btn btn-ghost" type="submit">Log out</button>
        </form>
        {% else %}
        <a class="btn btn-ghost" href="{% url 'login' %}">Log in</a>
        <a class="btn btn-accent" href="{% url 'signup' %}">Create account</a>
        {% endif %}
      </div>
    </div>

    <div class="filter-row mb-4">
      <a class="filter-chip {% if not selected_slug %}active{% endif %}" href="{% url 'entry_list' %}">All categories</a>
      {% for category in categories %}
      <a class="filter-chip {% if selected_slug == category.slug %}active{% endif %}" href="{% url 'entry_list' %}?category={{ category.slug }}">{{ category.name }} · {{ category.entry_total }}</a>
      {% endfor %}
    </div>

    {% if entries %}
    <div class="row g-4">
      {% for entry in entries %}
      <div class="col-lg-4 col-md-6">
        <article class="glass-panel entry-card h-100">
          <div class="entry-card-top">
            <span class="category-badge">{{ entry.category.name }}</span>
            <span class="entry-date">{{ entry.entry_date|date:"M j, Y" }}</span>
          </div>
          <h2 class="h4"><a href="{% url 'entry_detail' entry.pk %}">{{ entry.title }}</a></h2>
          <p>{{ entry.takeaway }}</p>
          <div class="entry-stats">
            <span>Focus {{ entry.focus_score }}/10</span>
            <span>Energy {{ entry.energy_score }}/10</span>
            <span>{{ entry.deep_work_minutes }} min</span>
          </div>
        </article>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="glass-panel empty-state">
      <h2>{% if is_demo_mode %}No demo entries for this filter{% else %}No private entries for this filter{% endif %}</h2>
      <p>{% if is_demo_mode %}Try a different category or create an account to start tracking your own days.{% else %}Try a different category or create a new check-in from the dashboard.{% endif %}</p>
      {% if request.user.is_authenticated %}
      <a class="btn btn-accent mt-3" href="{% url 'home' %}#check-in">Create an entry</a>
      {% else %}
      <a class="btn btn-accent mt-3" href="{% url 'signup' %}">Create your account</a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}