{% extends "base.html" %}

{% block content %}
<div class="quote-box" id="quote-{{ quote.id }}">
    <div class="quote-header">Quote #{{ quote.id }}</div>
    <div class="quote-text">{{ quote.quote | safe }}</div>
    {% if quote.comment %}
    <div class="quote-comment">{{ quote.comment }}</div>
    {% endif %}
    <div class="quote-footer">
        <div class="vote-buttons">
            <button class="vote-btn rox" onclick="vote({{ quote.id }}, 'rox')">
                👍 Rocks (<span id="rox-{{ quote.id }}">{{ quote.rox }}</span>)
            </button>
            <button class="vote-btn sox" onclick="vote({{ quote.id }}, 'sox')">
                🤷 Socks (<span id="sox-{{ quote.id }}">{{ quote.sox }}</span>)
            </button>
            <button class="vote-btn sux" onclick="vote({{ quote.id }}, 'sux')">
                👎 Sucks (<span id="sux-{{ quote.id }}">{{ quote.sux }}</span>)
            </button>
        </div>
        <div class="vote-counts">
            Score: <span class="score {% if quote.score > 0 %}positive{% elif quote.score < 0 %}negative{% endif %}" id="score-{{ quote.id }}">{{ quote.score }}</span>
        </div>
    </div>
</div>

<div style="text-align: center; margin-top: 20px;">
    <a href="{{ url_for('index') }}">← Back to recent quotes</a> |
    <a href="{{ url_for('random_quote') }}">Random quote →</a>
</div>
{% endblock %}

{% block extra_js %}
<script>
function vote(quoteId, voteType) {
    fetch(`/vote/${quoteId}/${voteType}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`rox-${quoteId}`).textContent = data.rox;
            document.getElementById(`sox-${quoteId}`).textContent = data.sox;
            document.getElementById(`sux-${quoteId}`).textContent = data.sux;
            document.getElementById(`score-${quoteId}`).textContent = data.score;
            
            const scoreElem = document.getElementById(`score-${quoteId}`);
            scoreElem.classList.remove('positive', 'negative');
            if (data.score > 0) scoreElem.classList.add('positive');
            else if (data.score < 0) scoreElem.classList.add('negative');
            
            const quoteBox = document.getElementById(`quote-${quoteId}`);
            const buttons = quoteBox.querySelectorAll('.vote-btn');
            buttons.forEach(btn => btn.disabled = true);
            
            alert('Vote recorded! Thanks for voting.');
        } else {
            alert(data.error || 'Error recording vote');
        }
    })
    .catch(error => {
        alert('Error: ' + error);
    });
}
</script>
{% endblock %}