{% if celebrate_streak %}
<div class="celebration-banner" x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show" x-transition>
  🎉 <strong>{{ celebrate_habit_name }}</strong> {{ celebrate_streak }}일 연속 달성! 축하해요!
</div>
{% endif %}

<div
  class="card"
  style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;"
  x-data="{ pushState: 'checking' }"
  x-init="habitPush.getSubscriptionState().then(s => pushState = s)"
>
  <h2 style="margin:0;">오늘</h2>
  <div style="display:flex; align-items:center; gap:8px;">
    <span class="badge">{{ checked_count }}/{{ total_count }} 완료</span>
    <button
      type="button"
      class="btn btn-secondary"
      x-show="pushState === 'unsubscribed'"
      x-cloak
      @click="habitPush.subscribePush().then(ok => { if (ok) pushState = 'subscribed'; })"
    >알림 켜기</button>
    <span class="badge" x-show="pushState === 'subscribed'" x-cloak>🔔 알림 켜짐</span>
  </div>
</div>

{% if yesterday_missed %}
<h2>어제 놓친 습관</h2>
<div class="card">
  {% for item in yesterday_missed %}
    {% include "partials/yesterday_item.html" %}
  {% endfor %}
</div>
{% endif %}

<h2>형성 습관</h2>
<div class="card">
  {% for item in build_items %}
    {% include "partials/today_item.html" %}
  {% else %}
    <div class="empty-state">오늘 예정된 형성 습관이 없어요.</div>
  {% endfor %}
</div>

<h2>중단 습관</h2>
<div class="card">
  {% for item in quit_items %}
    {% include "partials/today_item.html" %}
  {% else %}
    <div class="empty-state">오늘 예정된 중단 습관이 없어요.</div>
  {% endfor %}
</div>