{% extends "base.html" %}

{% block title %}LLM Accountant Demo{% endblock %}

{% block content %}
<h1>LLM Accountant Demo</h1>

<p>This page demonstrates the <code>datasette-llm-accountant</code> plugin. Submit a prompt to any LLM model and see the cost tracked below.</p>

<form method="post" action="/-/llm-accountant" style="margin: 2em 0;">
    <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
    <div style="margin-bottom: 1em;">
        <label for="model" style="display: block; margin-bottom: 0.5em; font-weight: bold;">Select Model:</label>
        <select name="model" id="model" required style="width: 100%; max-width: 500px; padding: 0.5em;">
            {% for model in models %}
            <option value="{{ model.model_id }}" {% if selected_model == model.model_id %}selected{% endif %}>
                {{ model.model_id }}
            </option>
            {% endfor %}
        </select>
    </div>

    <div style="margin-bottom: 1em;">
        <label for="prompt" style="display: block; margin-bottom: 0.5em; font-weight: bold;">Prompt:</label>
        <textarea name="prompt" id="prompt" required rows="5" style="width: 100%; max-width: 500px; padding: 0.5em;">{{ prompt_text or "" }}</textarea>
    </div>

    <div>
        <button type="submit" style="padding: 0.5em 1em; font-size: 1em; cursor: pointer;">Submit (reserves $0.50)</button>
    </div>
</form>

{% if error %}
<div style="background-color: #fee; border: 1px solid #c33; padding: 1em; margin: 1em 0; max-width: 500px;">
    <strong>Error:</strong> {{ error }}
</div>
{% endif %}

{% if response_text %}
<div style="margin: 2em 0;">
    <h2>Response:</h2>
    <div style="background-color: #f5f5f5; border: 1px solid #ddd; padding: 1em; white-space: pre-wrap; max-width: 800px;">{{ response_text }}</div>
</div>
{% endif %}

<div style="margin: 3em 0;">
    <h2>Transaction Log</h2>
    {% if transactions %}
    <table style="border-collapse: collapse; width: 100%; max-width: 800px;">
        <thead>
            <tr style="background-color: #f5f5f5;">
                <th style="border: 1px solid #ddd; padding: 0.5em; text-align: left;">Transaction ID</th>
                <th style="border: 1px solid #ddd; padding: 0.5em; text-align: right;">Nanocents</th>
                <th style="border: 1px solid #ddd; padding: 0.5em; text-align: right;">USD</th>
            </tr>
        </thead>
        <tbody>
            {% for tx in transactions %}
            <tr>
                <td style="border: 1px solid #ddd; padding: 0.5em; font-family: monospace;">{{ tx.tx_id }}</td>
                <td style="border: 1px solid #ddd; padding: 0.5em; text-align: right; font-family: monospace;">{{ "{:,}".format(tx.nanocents) }}</td>
                <td style="border: 1px solid #ddd; padding: 0.5em; text-align: right; font-family: monospace;">${{ "%.8f".format(tx.usd) }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr style="background-color: #f5f5f5; font-weight: bold;">
                <td style="border: 1px solid #ddd; padding: 0.5em;">Total</td>
                <td style="border: 1px solid #ddd; padding: 0.5em; text-align: right; font-family: monospace;">{{ "{:,}".format(transactions | map(attribute='nanocents') | sum) }}</td>
                <td style="border: 1px solid #ddd; padding: 0.5em; text-align: right; font-family: monospace;">${{ "%.8f".format(transactions | map(attribute='usd') | sum) }}</td>
            </tr>
        </tfoot>
    </table>
    {% else %}
    <p style="color: #666;">No transactions yet. Submit a prompt above to get started.</p>
    {% endif %}
</div>

{% endblock %}