{% extends "base.html" %}

{% block title %}Public Profile{% endblock %}

{% block content %}
<section class="rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
  <h1 class="text-3xl font-bold tracking-tight">@{{ page.username }}</h1>
  <p class="mt-2 text-sm text-slate-600">Public profile</p>
</section>

{% if page.show_entries || page.show_weights %}
<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">Recent Days</h2>
  <div class="mt-3 overflow-x-auto">
    <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-3 py-2">Date</th><th class="px-3 py-2">Calories</th><th class="px-3 py-2">Weight</th></tr>
      </thead>
      <tbody>
        {% for row in page.recent_days %}
        <tr class="border-t border-slate-200">
          <td class="px-3 py-2 text-sm">{{ row.date_text }}</td>
          <td class="px-3 py-2 text-sm">{% if page.show_entries %}{{ row.calories }}{% else %}Hidden{% endif %}</td>
          <td class="px-3 py-2 text-sm">{% if page.show_weights %}{{ row.weight_label }}{% else %}Hidden{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

{% if page.show_reports %}
<section class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  {% for card in page.report_cards %}
  <article class="rounded-2xl border border-slate-200/90 bg-white p-4 shadow-sm">
    <h2 class="text-base font-bold text-slate-900">{{ card.title }}</h2>
    <p class="mt-1 text-xs text-slate-500">{{ card.range_label }}</p>
    <p class="mt-4 text-3xl font-bold tracking-tight text-slate-900">{{ card.average_calories_per_day }}</p>
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">avg cal/day</p>
  </article>
  {% endfor %}
</section>
{% endif %}

{% if page.show_planning %}
<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">Planning</h2>
  <dl class="mt-3 space-y-2 text-sm text-slate-700">
    <div class="flex justify-between"><dt>Target weight (lbs)</dt><dd class="font-semibold">{{ page.target_weight_label }}</dd></div>
    <div class="flex justify-between"><dt>Target calories</dt><dd class="font-semibold">{{ page.target_calories_label }}</dd></div>
    <div class="flex justify-between"><dt>BMR</dt><dd class="font-semibold">{{ page.bmr_label }}</dd></div>
  </dl>
</section>
{% endif %}

{% if !page.show_entries && !page.show_weights && !page.show_reports && !page.show_planning %}
<section class="mt-4 rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-sm">
  <p class="text-sm text-slate-600">This user has not shared any data publicly.</p>
</section>
{% endif %}
{% endblock %}