{% extends parent %}
{% block title %}Sessions - Introspect{% endblock %}

{# Build query string helper — keeps all current params, overrides given ones.
   Uses kwargs + context-var fallback because Jinja2 macro defaults cannot
   reference template context variables when the template uses {% extends %}. #}
{% macro qs() -%}
page={{ kwargs.get("page", page) }}&page_size={{ kwargs.get("page_size", page_size) }}&sort={{ kwargs.get("sort", sort) }}&order={{ kwargs.get("order", order) }}&model={{ kwargs.get("model", filter_model) }}&project={{ kwargs.get("project", filter_project) }}&branch={{ kwargs.get("branch", filter_branch) }}&command={{ kwargs.get("command", filter_command) }}&q={{ kwargs.get("q", filter_q) }}
{%- endmacro %}

{# Sortable column header #}
{% macro sort_header(label, col) %}
{% set new_order = 'asc' if sort == col and order == 'desc' else 'desc' %}
{% set arrow = '' %}
{% if sort == col %}
  {% set arrow = ' ▲' if order == 'asc' else ' ▼' %}
{% endif %}
<th><a href="/sessions?{{ qs(page=1, sort=col, order=new_order) }}" hx-get="/sessions?{{ qs(page=1, sort=col, order=new_order) }}" hx-target="#content" hx-push-url="true" style="color:#555;text-decoration:none;white-space:nowrap;">{{ label }}{{ arrow }}</a></th>
{% endmacro %}

{% block content %}
<h1>Sessions <span style="font-size:0.9rem;color:#666;">({{ total }} total)</span></h1>

{# ── Filter bar ── #}
<div class="filter-bar">
    <form action="/sessions" method="get" style="display:inline-flex;gap:0.3rem;margin-right:0.5rem;">
        <input type="hidden" name="page" value="1" />
        <input type="hidden" name="page_size" value="{{ page_size }}" />
        <input type="hidden" name="sort" value="{{ sort }}" />
        <input type="hidden" name="order" value="{{ order }}" />
        <input type="hidden" name="model" value="{{ filter_model }}" />
        <input type="hidden" name="project" value="{{ filter_project }}" />
        <input type="hidden" name="branch" value="{{ filter_branch }}" />
        <input type="hidden" name="command" value="{{ filter_command }}" />
        <input type="search" name="q" value="{{ filter_q }}" placeholder="Search content..." style="padding:0.4rem 0.6rem;border:1px solid #ccc;border-radius:4px;font-size:0.85rem;width:160px;" />
        <button type="submit" style="padding:0.4rem 0.6rem;font-size:0.85rem;">Search</button>
    </form>
    <select onchange="window.location='/sessions?{{ qs(page=1) }}'.replace('model={{ filter_model }}', 'model='+this.value)" style="padding:0.4rem 0.6rem;border:1px solid #ccc;border-radius:4px;font-size:0.85rem;">
        <option value="">All models</option>
        {% for m in models %}
        <option value="{{ m }}" {{ 'selected' if m == filter_model else '' }}>{{ m }}</option>
        {% endfor %}
    </select>
    <select onchange="window.location='/sessions?{{ qs(page=1) }}'.replace('project={{ filter_project }}', 'project='+this.value)" style="padding:0.4rem 0.6rem;border:1px solid #ccc;border-radius:4px;font-size:0.85rem;">
        <option value="">All projects</option>
        {% for p in projects %}
        <option value="{{ p }}" {{ 'selected' if p == filter_project else '' }}>{{ p }}</option>
        {% endfor %}
    </select>
    <select onchange="window.location='/sessions?{{ qs(page=1) }}'.replace('branch={{ filter_branch }}', 'branch='+this.value)" style="padding:0.4rem 0.6rem;border:1px solid #ccc;border-radius:4px;font-size:0.85rem;">
        <option value="">All branches</option>
        {% for b in branches %}
        <option value="{{ b }}" {{ 'selected' if b == filter_branch else '' }}>{{ b }}</option>
        {% endfor %}
    </select>
    <select onchange="window.location='/sessions?{{ qs(page=1) }}'.replace('command={{ filter_command }}', 'command='+encodeURIComponent(this.value))" style="padding:0.4rem 0.6rem;border:1px solid #ccc;border-radius:4px;font-size:0.85rem;">
        <option value="">All commands</option>
        {% for c in commands_list %}
        <option value="{{ c }}" {{ 'selected' if c == filter_command else '' }}>{{ c }}</option>
        {% endfor %}
    </select>
    {% if filter_model or filter_project or filter_branch or filter_command or filter_q %}
    <a href="/sessions?{{ qs(page=1, model='', project='', branch='', command='', q='') }}" hx-get="/sessions?{{ qs(page=1, model='', project='', branch='', command='', q='') }}" hx-target="#content" hx-push-url="true" class="tool-btn tool-btn-sm">Clear filters</a>
    {% endif %}
</div>

{# ── Sessions table ── #}
<div class="card">
    <table>
        <thead>
            <tr>
                {{ sort_header('Project', 'project') }}
                {{ sort_header('Branch', 'branch') }}
                {{ sort_header('Title', 'title') }}
                <th>Date</th>
                <th>Start</th>
                <th>End</th>
                {{ sort_header('Duration', 'duration') }}
                {{ sort_header('User', 'user_msgs') }}
                {{ sort_header('Asst', 'asst_msgs') }}
                {{ sort_header('Tools', 'tool_calls') }}
                {{ sort_header('Read', 'files_read') }}
                {{ sort_header('Edited', 'files_edited') }}
                {{ sort_header('Read Only', 'files_read_only') }}
                {{ sort_header('Outside', 'files_outside') }}
                <th>Commands</th>
                {{ sort_header('Cost', 'cost') }}
                {{ sort_header('Model', 'model') }}
            </tr>
        </thead>
        <tbody>
            {% for s in sessions %}
            <tr>
                <td><span class="truncate">{{ s.project }}</span></td>
                <td><span class="truncate">{{ s.branch }}</span></td>
                <td><a href="/sessions/{{ s.id }}" hx-get="/sessions/{{ s.id }}" hx-target="#content" hx-push-url="true"><span class="truncate" style="max-width:350px;" title="{{ s.title }}">{{ s.title or '(no title)' }}</span></a></td>
                <td style="white-space:nowrap;">{{ s.date }}</td>
                <td style="white-space:nowrap;">{{ s.start_time }}</td>
                <td style="white-space:nowrap;">{{ s.end_time }}</td>
                <td style="white-space:nowrap;">{{ s.duration }}</td>
                <td>{{ s.user_msgs }}</td>
                <td>{{ s.asst_msgs }}</td>
                <td>{% if s.tool_count %}<a href="/tools?session={{ s.id }}" hx-get="/tools?session={{ s.id }}" hx-target="#content" hx-push-url="true">{{ s.tool_count }}</a>{% else %}0{% endif %}</td>
                <td>{{ s.files_read }}</td>
                <td>{{ s.files_edited }}</td>
                <td>{{ s.files_read_only }}</td>
                <td>{{ s.files_outside }}</td>
                <td>{% if s.commands %}{% for c in s.commands.split(', ') %}<span class="tool-btn tool-btn-sm" style="font-size:0.75rem;padding:0.1rem 0.4rem;margin:0.1rem;">{{ c }}</span>{% endfor %}{% endif %}</td>
                <td style="white-space:nowrap;text-align:right;">{% if s.cost %}<a href="/sessions/{{ s.id }}?tab=cost" hx-get="/sessions/{{ s.id }}?tab=cost" hx-target="#content" hx-push-url="true">{{ s.cost }}</a>{% else %}—{% endif %}</td>
                <td>{{ s.model }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{# ── Pagination + page size ── #}
<div class="pagination">
    {% if page > 1 %}
    <a href="/sessions?{{ qs(page=page - 1) }}" hx-get="/sessions?{{ qs(page=page - 1) }}" hx-target="#content" hx-push-url="true">Prev</a>
    {% endif %}
    <span class="current">Page {{ page }} of {{ total_pages }}</span>
    {% if page < total_pages %}
    <a href="/sessions?{{ qs(page=page + 1) }}" hx-get="/sessions?{{ qs(page=page + 1) }}" hx-target="#content" hx-push-url="true">Next</a>
    {% endif %}
    <span style="margin-left:1rem;font-size:0.85rem;color:#666;">
        Show
        {% for ps in page_sizes %}
            {% if ps == page_size %}
                <strong>{{ ps }}</strong>
            {% else %}
                <a href="/sessions?{{ qs(page=1, page_size=ps) }}" hx-get="/sessions?{{ qs(page=1, page_size=ps) }}" hx-target="#content" hx-push-url="true">{{ ps }}</a>
            {% endif %}
            {% if not loop.last %}/{% endif %}
        {% endfor %}
        per page
    </span>
</div>
{% endblock %}