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

<!-- including head -->
<%- include('../../../../views/partials/head.ejs') %>

    <body class="bg-[#effaff] font-quickSand">

        <!-- including header -->
        <%- include('../../../../views/partials/header.ejs') %>

            <div id="blurContentBscitIP" class="pt-[88px]">
                <div class="overflow-x-auto">
                    <div
                        class="align-middle inline-block min-w-full shadow overflow-hidden bg-transparent shadow-dashboard pt-4 px-2 md:px-8 rounded-bl-lg rounded-br-lg">
                        <table class="min-w-full">
                            <thead>
                                <tr>
                                    <th class="px-3 py-2 md:px-6 md:py-4 border-b-2 border-gray-300 text-left text-blue-500">
                                        Materials</th>
                                    <th class="px-3 py-2 md:px-6 md:py-4 border-b-2 border-gray-300 text-left text-sm text-blue-500">
                                        Status</th>
                                    <th class="px-3 py-2 md:px-6 md:py-4 border-b-2 border-gray-300"></th>
                                </tr>
                            </thead>
                            <tbody class="bg-transparent">
                                <!-- subject 1 -->
                                <tr>
                                    <td class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-xs md:text-sm leading-5 text-gray-800">IP Syllabus
                                        </div>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-[10px] md:text-sm leading-5">
                                        <span
                                            class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                            <span aria-hidden
                                                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
                                            <span class="relative text-[10px] md:text-xs">unavailable</span>
                                        </span>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-right border-b border-gray-500 text-xs md:text-sm leading-5">
                                        <a href="/resource/bscit/semester1/imperative programming">
                                            <button
                                                class="px-3 py-2 border-[#3bbeff] border text-[#3bbeff] rounded transition duration-300 hover:bg-[#3bbeff] hover:text-white focus:outline-none">Download</button>
                                            </a>
                                    </td>
                                </tr>
                                <!-- subject 2 -->
                                <tr>
                                    <td class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-xs md:text-sm leading-5 text-gray-800">IP Notes 1
                                        </div>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-[10px] md:text-sm leading-5">
                                        <span
                                            class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                            <span aria-hidden
                                                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
                                            <span class="relative text-[10px] md:text-xs">available</span>
                                        </span>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-right border-b border-gray-500 text-xs md:text-sm leading-5">
                                        <a href="/ip notes 1">
                                            <button
                                                class="px-3 py-2 border-[#3bbeff] border text-[#3bbeff] rounded transition duration-300 hover:bg-[#3bbeff] hover:text-white focus:outline-none">View
                                                Chapters</button>
                                            </a>
                                    </td>
                                </tr>
                                <!-- subject 3 -->
                                <tr>
                                    <td class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-xs md:text-sm leading-5 text-gray-800">IP Notes 2
                                        </div>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-[10px] md:text-sm leading-5">
                                        <span
                                            class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                            <span aria-hidden
                                                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
                                            <span class="relative text-[10px] md:text-xs">unavailable</span>
                                        </span>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-right border-b border-gray-500 text-xs md:text-sm leading-5">
                                        <a href="/resource/bscit/semester1/imperative programming/ip notes 1">
                                            <button
                                                class="px-3 py-2 border-[#3bbeff] border text-[#3bbeff] rounded transition duration-300 hover:bg-[#3bbeff] hover:text-white focus:outline-none">View
                                                Chapters</button>
                                            </a>
                                    </td>
                                </tr>
                                <!-- subject 4 -->
                                <tr>
                                    <td class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-xs md:text-sm leading-5 text-gray-800">IP Question Bank
                                        </div>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-[10px] md:text-sm leading-5">
                                        <span
                                            class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                            <span aria-hidden
                                                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
                                            <span class="relative text-[10px] md:text-xs">unavailable</span>
                                        </span>
                                    </td>
                                    <td
                                        class="px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-right border-b border-gray-500 text-xs md:text-sm leading-5">
                                        <a href="/resource/bscit/semester1/discrete mathematics">
                                            <button
                                                class="px-3 py-2 border-[#3bbeff] border text-[#3bbeff] rounded transition duration-300 hover:bg-[#3bbeff] hover:text-white focus:outline-none">Download</button>
                                            </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="bg-transparent py-20">&nbsp;<br>&nbsp;<br>&nbsp;<br></div>
                    </div>
                </div>
                <!-- including footer -->
                <%- include('../../../../views/partials/footer.ejs') %>
            </div>

            <!-- script for toggle menu -->
            <script>
                const dropdownMenu = document.querySelector(".dropdown-menu");
                function onToggleMenu(e) {
                    e.name = e.name === "menu" ? "close" : "menu";
                    dropdownMenu.classList.toggle("left-[0%]");
                }
                document.addEventListener('DOMContentLoaded', function () {
                    const menuIcon = document.getElementById('toggle-button-bscit-IP');
                    const blurContent = document.getElementById('blurContentBscitIP');

                    menuIcon.addEventListener('click', function () {
                        blurContent.classList.toggle('blur-sm');
                        setTimeout(function () {
                            blurContent.classList.toggle('in-trans');
                        }, 300);
                    });
                }); 
            </script>

    </body>

</html>