{% extends "base.html" %}

{% block title %}Shared Day {{ page.date_text }}{% endblock %}

{% block content %}
<a href="/u/{{ page.username }}" class="inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition hover:text-slate-900">
  <span>&larr;</span>
  <span>Back to @{{ page.username }}</span>
</a>

<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
  <h1 class="text-3xl font-bold tracking-tight">@{{ page.username }} - {{ page.date_text }}</h1>
  <p class="mt-3 inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-900">
    Daily total: {{ page.daily_total }} cal
  </p>
  {% if page.show_weight %}
  <p class="mt-2 text-sm text-slate-700">Weight: {{ page.weight_label }}</p>
  {% endif %}
</section>

<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
  <h2 class="text-xl font-bold tracking-tight">Food Entries</h2>
  <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200">
    <table class="w-full border-collapse">
      <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
        <tr><th class="px-5 py-3">Food</th><th class="px-5 py-3">Calories</th></tr>
      </thead>
      <tbody class="bg-white">
        {% if page.entries.is_empty() %}
        <tr><td colspan="2" class="px-5 py-8 text-center text-slate-500">No entries shared for this day.</td></tr>
        {% else %}
          {% for entry in page.entries %}
          <tr class="border-t border-slate-200">
            <td class="px-5 py-3 text-sm text-slate-800">{{ entry.name }}</td>
            <td class="px-5 py-3 text-sm font-semibold text-slate-900">{{ entry.calories }} cal</td>
          </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>
  </div>
</section>

{% if !page.entries.is_empty() %}
<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
  <h2 class="text-xl font-bold tracking-tight text-slate-900">Calories by Entry</h2>
  <div class="mt-4 h-80">
    <canvas id="public-day-chart"></canvas>
  </div>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
{% if !page.entries.is_empty() %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = {{ page.chart_labels_js|safe }};
  const values = {{ page.chart_values_js|safe }};
  new Chart(
    document.getElementById("public-day-chart"),
    {
      type: "bar",
      data: {
        labels,
        datasets: [
          {
            label: "Calories",
            data: values,
            backgroundColor: "rgba(15, 118, 110, 0.25)",
            borderColor: "#0f766e",
            borderWidth: 1
          }
        ]
      },
      options: {
        maintainAspectRatio: false,
        scales: { y: { beginAtZero: true } }
      }
    }
  );
</script>
{% endif %}
{% endblock %}