{% extends "base.html" %}
{% block title %}Sessions — {{ date }}{% endblock %}
{% block breadcrumb %}
<span class="ccx-header__sep">/</span>
<span class="ccx-header__crumb"><a href="/">All Days</a></span>
<span class="ccx-header__sep">/</span>
<span class="ccx-header__crumb">{{ date }}</span>
{% endblock %}
{% block content %}
<a class="ccx-back" href="/">← Back to all days</a>
<h2>Sessions on {{ date }}</h2>
<div class="ccx-metrics">
  <div class="ccx-metric">
    <span class="ccx-metric__label">Total Cost</span>
    <span class="ccx-metric__value ccx-metric__value--accent">{{ format_cost(total_cost) }}</span>
    {% if show_source_split %}
    <div class="ccx-metric__split">
      <span class="ccx-metric__split-item"><span class="ccx-metric__split-dot ccx-metric__split-dot--bedrock"></span>Bedrock {{ format_cost(total_bedrock_cost) }}</span>
      <span class="ccx-metric__split-item"><span class="ccx-metric__split-dot ccx-metric__split-dot--api"></span>API {{ format_cost(total_api_cost) }}</span>
    </div>
    {% endif %}
  </div>
  <div class="ccx-metric">
    <span class="ccx-metric__label">Sessions</span>
    <span class="ccx-metric__value">{{ sessions|length }}</span>
  </div>
  <div class="ccx-metric">
    <span class="ccx-metric__label">API Calls</span>
    <span class="ccx-metric__value">{{ sessions|sum(attribute='message_count') }}</span>
  </div>
</div>
<div class="ccx-card">
  <table class="ccx-table">
    <thead><tr>
      <th aria-sort="{% if sort_by == 'session' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'session' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'session', sort_by, sort_order, date=date) }}">Session<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'project' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'project' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'project', sort_by, sort_order, date=date) }}">Project<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'cost' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'cost' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'cost', sort_by, sort_order, date=date) }}">Cost<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      {% if show_source_split %}
      <th aria-sort="{% if sort_by == 'bedrock' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'bedrock' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'bedrock', sort_by, sort_order, date=date) }}">Bedrock<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'api' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'api' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'api', sort_by, sort_order, date=date) }}">API<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      {% endif %}
      <th aria-sort="{% if sort_by == 'calls' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'calls' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'calls', sort_by, sort_order, date=date) }}">API Calls<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'input' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'input' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'input', sort_by, sort_order, date=date) }}">Input Tokens<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'output' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'output' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'output', sort_by, sort_order, date=date) }}">Output Tokens<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
      <th aria-sort="{% if sort_by == 'time' %}{% if sort_order == 'asc' %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}">
        <a class="ccx-sort-link{% if sort_by == 'time' %} is-active is-{{ sort_order }}{% endif %}" href="{{ sort_url('day_sessions_view', 'time', sort_by, sort_order, date=date) }}">Time<span class="ccx-sort-caret" aria-hidden="true"></span></a>
      </th>
    </tr></thead>
    <tbody>
      {% for session in sessions %}
      <tr>
        <td>
          <a href="/session/{{ session.session_id }}">{{ session.title }}</a>
          {% if show_source_split %}
          <span class="ccx-badge ccx-badge--source ccx-badge--{{ session.source }}" style="margin-left:6px;" title="{% if session.bedrock_cost %}Bedrock {{ format_cost(session.bedrock_cost) }}{% endif %}{% if session.bedrock_cost and session.api_cost %} · {% endif %}{% if session.api_cost %}API {{ format_cost(session.api_cost) }}{% endif %}">{{ source_label(session.source) }}</span>
          {% endif %}
        </td>
        <td><a href="/session/{{ session.session_id }}" style="color:var(--ccx-text-secondary);" title="{{ session.project_path }}">{{ session.project_name }}</a></td>
        <td class="ccx-cost {{ cost_severity(session.total_cost) }}">{{ format_cost(session.total_cost) }}</td>
        {% if show_source_split %}
        <td class="ccx-cost" style="color: #FFB454;">{% if session.bedrock_cost %}{{ format_cost(session.bedrock_cost) }}{% else %}<span style="color:var(--ccx-text-muted);">—</span>{% endif %}</td>
        <td class="ccx-cost" style="color: var(--ccx-accent-soft);">{% if session.api_cost %}{{ format_cost(session.api_cost) }}{% else %}<span style="color:var(--ccx-text-muted);">—</span>{% endif %}</td>
        {% endif %}
        <td class="ccx-tokens">{{ session.message_count }}</td>
        <td class="ccx-tokens">{{ format_tokens(session.total_input_tokens) }}</td>
        <td class="ccx-tokens">{{ format_tokens(session.total_output_tokens) }}</td>
        <td class="ccx-tokens">{{ session.first_timestamp[:16].replace("T", " ") }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}