<div class="tickets-container" style="background:#121212; min-height:100vh; padding:40px; color:#fff;">

    <div style="max-width:900px; margin:0 auto;">

        <h2 style="color:#ff2d2d; text-align:center; margin-bottom:30px;">Support Tickets</h2>

        <div style="text-align:right; margin-bottom:20px;">

            <a href="/tickets/new" style="background:#ff2d2d; padding:10px 15px; border-radius:4px; color:#fff; text-decoration:none; font-weight:600;">

                + New Ticket

            </a>

        </div>

        <table style="width:100%; background:#1a1a1a; border-collapse:collapse; border-radius:6px; overflow:hidden;">

            <thead>

                <tr style="background:#2a2a2a;">

                    <th style="padding:12px; text-align:left; color:#ff2d2d;">ID</th>

                    <th style="padding:12px; text-align:left; color:#ff2d2d;">Subject</th>

                    <th style="padding:12px; text-align:left; color:#ff2d2d;">Status</th>

                    <th style="padding:12px; text-align:left; color:#ff2d2d;">Date</th>

                </tr>

            </thead>

            <tbody>

                {% for ticket in tickets %}

                    <tr style="border-bottom:1px solid #333;">

                        <td style="padding:10px;">{{ ticket.id }}</td>

                        <td style="padding:10px;">{{ ticket.subject }}</td>

                        <td style="padding:10px; color:#ff2d2d;">{{ ticket.status }}</td>

                        <td style="padding:10px;">{{ ticket.date }}</td>

                    </tr>

                {% else %}

                    <tr>

                        <td colspan="4" style="padding:15px; text-align:center; color:#b3b3b3;">

                            No tickets found.

                        </td>

                    </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>

</div>