{% extends "base.html" %}

{% block content %}
<h2>Top Rated Quotes</h2>

{% if quotes %}
    {% for quote in quotes %}
    <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> |
                <a href="{{ url_for('view_quote', quote_id=quote.id) }}" class="quote-link">permalink</a>
            </div>
        </div>
    </div>
    {% endfor %}
    
    {% if total_pages > 1 %}
    <div class="pagination">
        {% if page > 1 %}
            <a href="{{ url_for('top', page=1) }}">« First</a>
            <a href="{{ url_for('top', page=page-1) }}">‹ Previous</a>
        {% endif %}
        
        <span class="current">Page {{ page }} of {{ total_pages }}</span>
        
        {% if page < total_pages %}
            <a href="{{ url_for('top', page=page+1) }}">Next ›</a>
            <a href="{{ url_for('top', page=total_pages) }}">Last »</a>
        {% endif %}
    </div>
    {% endif %}
{% else %}
    <p>No quotes found.</p>
{% endif %}
{% 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 %}