<!DOCTYPE html>
<html>

<head>
    <title>View Documents</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f9;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 40px auto;
            background: #fff;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }

        form {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        label {
            font-weight: 600;
            color: #34495e;
        }

        select {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            background-color: #fff;
        }

        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        thead {
            background-color: #2c3e50;
            color: white;
        }

        th,
        td {
            padding: 12px 15px;
            border: 1px solid #ddd;
            text-align: center;
        }

        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tbody tr:hover {
            background-color: #f1f1f1;
        }

        a {
            color: #2980b9;
            text-decoration: none;
            font-weight: 600;
        }

        a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            form {
                flex-direction: column;
                align-items: center;
            }

            .container {
                padding: 20px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Document Records</h2>

        <form method="GET">
            <label for="year">Filter by Year:</label>
            <select name="year">
                <option value="">All</option>
                {% for y in years %}
                <option value="{{ y }}">{{ y }}</option>
                {% endfor %}
            </select>

            <label for="stage">Filter by Stage:</label>
            <select name="stage">
                <option value="">All</option>
                <option value="ITR">ITR</option>
                <option value="AO">AO</option>
                <option value="CIT">CIT</option>
                <option value="ITAT">ITAT</option>
            </select>

            <button type="submit">Apply</button>
        </form>

        <table>
            <thead>
                <tr>
                    <th>File</th>
                    <th>Type</th>
                    <th>Stage</th>
                    <th>Year</th>
                    <th>Uploaded At</th>
                    <th>Download</th>
                    <th>View</th>
                </tr>
            </thead>
            <tbody>
                {% for doc in documents %}
                <tr>
                    <td>{{ doc.filename }}</td>
                    <td>{{ doc.filetype }}</td>
                    <td>{{ doc.stage }}</td>
                    <td>{{ doc.year }}</td>
                    <td>{{ doc.uploaded_at }}</td>
                    <td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">Download</a></td>
                    <td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view"
                            target="_blank">View</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>

</html>