{# Daily-cost panel fragment.

   Targeted by HTMX swaps when the breakdown selector changes. The
   wrapping <div> is what HTMX replaces; the chart inside is initialised
   by the bootstrap script in base.html (which listens for
   ``htmx:afterSettle``), keyed off the ``.cost-chart`` class and
   ``data-figure-id`` attribute. No executable JS in this fragment — that
   way the swap can't fire chart init mid-settle.

   The Plotly figure JSON is delivered through a non-executing
   <script type="application/json"> tag — a literal "</script>" inside a
   future trace name can't break out of an outer script.
#}
<div id="daily-cost-panel">
    <div class="filter-bar" style="margin-bottom:0.6rem;">
        <span style="color:#666;font-size:0.85rem;">Break down by:</span>
        {% for opt in breakdown_options %}
        <a class="tool-btn tool-btn-sm{% if opt == breakdown %} tool-btn-active{% endif %}"
           hx-get="/cost-overview/breakdown?breakdown={{ opt }}"
           hx-target="#daily-cost-panel"
           hx-swap="outerHTML">{{ opt }}</a>
        {% endfor %}
        {% if has_data %}
        <span style="margin-left:auto;color:#888;font-size:0.85rem;">
            {{ total_cost }} across {{ day_count }} day{{ '' if day_count == 1 else 's' }}
        </span>
        {% endif %}
    </div>

    {% if has_data %}
    <div id="daily-cost-chart"
         class="cost-chart"
         style="width:100%;min-height:360px;"
         data-figure-id="daily-cost-chart-data"
         data-height="360"
         data-breakdown="{{ breakdown }}"
         data-on-click="hourly-drilldown"></div>
    <p style="color:#888;font-size:0.78rem;margin-top:0.3rem;">
        Tip: click any bar to drill into hourly cost for that day.
    </p>
    <script type="application/json" id="daily-cost-chart-data">{{ chart_json|safe }}</script>
    {% else %}
    <p>No cost data yet.</p>
    {% endif %}
</div>