{% 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 %}

    {% if created %}
    <div class="alert custom-alert alert-success mb-4" role="alert">
      Nice—your check-in was saved successfully. This detail page is the confirmation step of the MVP workflow.
    </div>
    {% endif %}

    <div class="row g-4">
      <div class="col-lg-8">
        <article class="glass-panel detail-panel h-100">
          <div class="entry-card-top mb-3">
            <span class="category-badge">{{ entry.category.name }}</span>
            <span class="entry-date">{{ entry.entry_date|date:"F j, Y" }}</span>
          </div>
          <h1>{{ entry.title }}</h1>
          <p class="detail-lead">{{ entry.takeaway }}</p>
          <div class="detail-metrics">
            <div class="metric-card detail-metric">
              <span>Focus</span>
              <strong>{{ entry.focus_score }}/10</strong>
            </div>
            <div class="metric-card detail-metric">
              <span>Energy</span>
              <strong>{{ entry.energy_score }}/10</strong>
            </div>
            <div class="metric-card detail-metric">
              <span>Deep work</span>
              <strong>{{ entry.deep_work_minutes }}m</strong>
            </div>
            <div class="metric-card detail-metric">
              <span>Momentum</span>
              <strong>{{ entry.momentum_score }}/10</strong>
            </div>
          </div>
          <section class="reflection-block">
            <h2>Reflection</h2>
            <p>{{ entry.reflection|default:"No extra reflection was added for this day."|linebreaksbr }}</p>
          </section>
        </article>
      </div>
      <div class="col-lg-4">
        <aside class="glass-panel sidebar-panel h-100">
          <div class="section-heading compact mb-3">
            <span class="eyebrow">Next actions</span>
            <h2>Keep the loop going</h2>
          </div>
          <div class="d-grid gap-3 mb-4">
            {% if request.user.is_authenticated %}
            <a class="btn btn-accent" href="{% url 'home' %}#check-in">Log another day</a>
            {% else %}
            <a class="btn btn-accent" href="{% url 'signup' %}">Create your account</a>
            {% endif %}
            <a class="btn btn-ghost" href="{% url 'entry_list' %}">{% if is_demo_mode %}View demo entries{% else %}View all entries{% endif %}</a>
            <a class="btn btn-ghost" href="/admin/">Open admin</a>
          </div>
          <h3 class="h5">More in {{ entry.category.name }}</h3>
          <div class="related-list">
            {% for related in related_entries %}
            <a class="related-item" href="{% url 'entry_detail' related.pk %}">
              <strong>{{ related.title }}</strong>
              <span>{{ related.entry_date|date:"M j" }} · {{ related.takeaway }}</span>
            </a>
            {% empty %}
            <p class="mb-0 text-muted">This is the first entry in this category.</p>
            {% endfor %}
          </div>
        </aside>
      </div>
    </div>
  </div>
</div>
{% endblock %}