{% extends "base.html" %}
{% block title %}Share {{ public_id }}{% endblock %}
{% block content %}
    <p style="margin-bottom: 1rem;">
        ID: <small>{{ public_id }}</small>
    </p>
    <div class="output-card" style="width: 100%;">
        <div class="card-header">
            <small class="command">{{ command or 'N/A' }}</small>
            <a href="/raw/{{ public_id }}" style="font-size: 0.9em; color: #61afef;">View Raw</a>
        </div>
        <pre class="terminal-output" style="max-height: 600px; overflow-y: auto;">{{ html_content | safe }}</pre>
        <div class="card-footer">
            <div class="footer-left">
                <span class="created-at" data-date="{{ created_at }}"></span>
            </div>
            <div id="vote-widget" class="vote-widget" data-public-id="{{ public_id }}">
                <button id="upvote-btn" class="vote-btn" title="Upvote">⬆</button>
                <small id="score" class="score" title="Score">{{ upvotes - downvotes }}</small>
                <button id="downvote-btn" class="vote-btn" title="Downvote">⬇</button>
            </div>
        </div>
    {% endblock %}