{% extends "base.html" %}

{% block title %}Showboat{% endblock %}

{% block extra_head %}
<style>
    .showboat-doc-list { list-style: none; padding: 0; }
    .showboat-doc-list li {
        padding: 0.5em 0;
        border-bottom: 1px solid #eee;
    }
    .showboat-doc-list li:last-child { border-bottom: none; }
    .showboat-doc-title { font-weight: 600; }
    .showboat-doc-meta {
        color: #666;
        font-size: 0.85em;
        margin-left: 0.3em;
    }
    .showboat-doc-uuid {
        font-family: monospace;
        font-size: 0.8em;
        color: #888;
    }
    .showboat-setup-box {
        display: inline-flex;
        align-items: center;
        gap: 0.6em;
        background: #f6f8fa;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        padding: 0.6em 1em;
        margin: 1em 0;
    }
    .showboat-setup-box pre {
        margin: 0;
        background: none;
        border: none;
        padding: 0;
    }
    .showboat-copy-btn {
        background: #fff;
        border: 1px solid #d0d7de;
        border-radius: 4px;
        padding: 0.25em 0.5em;
        cursor: pointer;
        font-size: 0.8em;
        color: #333;
        white-space: nowrap;
    }
    .showboat-copy-btn:hover { background: #f0f0f0; }
</style>
{% endblock %}

{% block content %}
    <h1>Showboat</h1>
    <p>Remote viewer for <a href="https://github.com/simonw/showboat">Showboat</a> documents.</p>

    {% if documents %}
    <ul class="showboat-doc-list">
        {% for doc in documents %}
        <li>
            <a href="{{ base_url }}-/showboat/{{ doc.showboat_id }}" class="showboat-doc-title">{{ doc.title or doc.showboat_id }}</a>
            <span class="showboat-doc-meta">{{ doc.first_chunk[:16].replace("T", " ") }} &middot; {{ doc.chunk_count }} chunks</span>
            {% if doc.title %}
            <br><span class="showboat-doc-uuid">{{ doc.showboat_id }}</span>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>No documents yet.</p>
    {% endif %}

    <h2>Setup</h2>
    <p>To send showboat output to this server, set the <code>SHOWBOAT_REMOTE_URL</code>
    environment variable:</p>
    {% if has_token %}
    <div class="showboat-setup-box">
        <pre><code>export SHOWBOAT_REMOTE_URL="{{ receive_url }}?token=your-token"</code></pre>
        <button class="showboat-copy-btn" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());var b=this;b.textContent='Copied!';setTimeout(function(){b.textContent='Copy'},1500)">Copy</button>
    </div>
    <p>Replace <code>your-token</code> with the configured token.</p>
    {% else %}
    <div class="showboat-setup-box">
        <pre><code>export SHOWBOAT_REMOTE_URL="{{ receive_url }}"</code></pre>
        <button class="showboat-copy-btn" onclick="navigator.clipboard.writeText(this.previousElementSibling.textContent.trim());var b=this;b.textContent='Copied!';setTimeout(function(){b.textContent='Copy'},1500)">Copy</button>
    </div>
    {% endif %}
{% endblock %}