<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ircquotes: Browse Quotes</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
    <script>
        // Prevent flash of white content by applying theme immediately
        (function() {
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
                document.documentElement.className = 'dark-theme';
            }
        })();
    </script>
    <script src="{{ url_for('static', filename='voting.js') }}"></script>
    <script src="{{ url_for('static', filename='theme.js') }}"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#c08000" vlink="#c08000" alink="#c08000">

    <!-- Top Navigation Bar -->
    <center>
        <table cellpadding="2" cellspacing="0" width="80%" border="0">
            <tr>
                <td bgcolor="#c08000" align="left">
                    <font size="+1"><b><i>ircquotes</i></b></font>
                </td>
                <td bgcolor="#c08000" align="right">
                    <font face="arial" size="+1"><b>Browse Quotes</b></font>
                </td>
            </tr>
        </table>

        <!-- Navigation Links -->
        <table cellpadding="2" cellspacing="0" width="80%" border="0">
            <tr>
                <td class="footertext" align="left" bgcolor="#f0f0f0"></td>
                <td align="right" bgcolor="#f0f0f0" class="toplinks" colspan="2">
                    <a href="/">Home</a> /
                    <a href="/random">Random</a> /
                    <a href="/submit">Submit</a> /
                    <a href="/browse">Browse</a> /
                    <a href="/modapp">ModApp</a> /
                    <a href="/search">Search</a> /
                    <a href="/faq">FAQ</a>
                    <button id="theme-toggle" onclick="toggleDarkMode()" title="Toggle dark/light mode">🌙</button>
                </td>
            </tr>
        </table>
    </center>

    <!-- Browse Quotes -->
    <center>
        <table cellpadding="0" cellspacing="3" width="80%">
            <tr>
                <td class="bodytext" width="100%" valign="top">
                    {% for quote in quotes.items %}
                    <p class="quote">
                        <a href="/quote?id={{ quote.id }}" title="Permanent link to this quote."><b>#{{ quote.id }}</b></a>
                        &nbsp;
                        <a href="#" onclick="return vote({{ quote.id }}, &quot;upvote&quot;, this)" class="qa" id="up-{{ quote.id }}">+</a>
                        <span id="votes-{{ quote.id }}"><font color="green">{{ quote.votes }}</font></span>
                        <a href="#" onclick="return vote({{ quote.id }}, &quot;downvote&quot;, this)" class="qa" id="down-{{ quote.id }}">-</a>
                        &nbsp;
                        <a href="#" onclick="return flag({{ quote.id }}, this)" class="qa">X</a>
                        &nbsp;
                        <a href="#" onclick="return copyQuote({{ quote.id }}, this)" class="qa" title="Copy quote to clipboard">C</a>
                    </p>
                    <p class="qt">{{ quote.text|e }}</p>
                    <hr>
                    {% endfor %}
                </td>
            </tr>
        </table>

        <!-- Pagination -->
        <div id="pagination">
            {% if quotes.has_prev %}
            <a href="{{ url_for('browse', page=quotes.prev_num) }}">&laquo; Previous</a>
            {% endif %}
            Page {{ quotes.page }} of {{ quotes.pages }}
            {% if quotes.has_next %}
            <a href="{{ url_for('browse', page=quotes.next_num) }}">Next &raquo;</a>
            {% endif %}
        </div>
    </center>

    <!-- Footer -->
    <center>
        <table border="0" cellpadding="2" cellspacing="0" width="80%" bgcolor="#c08000">
            <tr>
                <td bgcolor="#f0f0f0" class="toplinks" colspan="2">
                    <a href="/">Home</a> /
                    <a href="/random">Random</a> /
                    <a href="/submit">Submit</a> /
                    <a href="/browse">Browse</a> /
                    <a href="/modapp">ModApp</a> /
                    <a href="/search">Search</a>
                    <a href="/faq">FAQ</a>
                </td>
            </tr>
            <tr>
                <td class="footertext" align="left">&nbsp;</td>
                <td class="footertext" align="right">{{ approved_count }} quotes approved</td>
            </tr>
        </table>

        <font size="-1">
            <a href="#">Hosted by YourHostingProvider</a><br>
            @ ircquotes 2024-2025
        </font>
    </center>

</body>

</html>
