{% extends "base.html" %}

{% block title %}Morning Briefing{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="container briefing-container py-4">

  <div class="briefing-header mb-4">
    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
      <div>
        <div class="briefing-greeting">Good morning.</div>
        <div class="briefing-timestamp">
          Briefing generated
          <span class="briefing-ts-val">{{ briefing.generated_at.strftime('%Y-%m-%d %H:%M UTC') }}</span>
          &mdash; covering
          <span class="briefing-ts-val">{{ briefing.period_start.strftime('%H:%M') }}</span>
          to
          <span class="briefing-ts-val">{{ briefing.period_end.strftime('%H:%M UTC') }}</span>
        </div>
      </div>
      <button class="btn-refresh" id="btn-regenerate" onclick="regenerateBriefing()">REGENERATE</button>
    </div>
  </div>

  <div class="card mc-panel briefing-summary mb-4">
    <div class="card-header mc-panel-header">// TIMMY&rsquo;S REPORT</div>
    <div class="card-body p-4">
      <div class="briefing-prose">{{ briefing.summary | e }}</div>
    </div>
  </div>

  <div class="card mc-panel">
    <div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
      <span>// APPROVAL QUEUE</span>
      <span class="badge badge-warning" id="approval-count">{{ briefing.approval_items | length }} pending</span>
    </div>
    <div class="card-body p-3"
         id="approval-queue"
         hx-get="/briefing/approvals"
         hx-trigger="load"
         hx-swap="innerHTML">
      <div style="text-align:center; color:var(--text-dim); padding:16px; font-size:0.85rem;">Loading approval items&hellip;</div>
    </div>
  </div>

</div>

<script>
async function regenerateBriefing() {
  var btn = document.getElementById('btn-regenerate');
  btn.textContent = 'REGENERATING...';
  btn.disabled = true;
  try {
    var resp = await fetch('/briefing/regenerate', { method: 'POST' });
    if (resp.ok) {
      window.location.reload();
    } else {
      btn.textContent = 'FAILED';
      setTimeout(function() { btn.textContent = 'REGENERATE'; btn.disabled = false; }, 2000);
    }
  } catch (e) {
    btn.textContent = 'ERROR';
    setTimeout(function() { btn.textContent = 'REGENERATE'; btn.disabled = false; }, 2000);
  }
}
</script>
{% endblock %}
