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

<head>
    <meta charset="UTF-8" dir="ltr">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css-file/student.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information</title>
</head>

<body id="body">

    <%- include('navbar') %>

    <div>
        <ul class="logout">

            <li>
                <a style="text-decoration: none;" href="index.ejs">
                    <i class='bx bx-log-out'></i>
                    <span class="links_name">Logout</span>
                </a>
            </li>

        </ul>
    </div>
    <main class="main-content">
        <div class="profile">
            <br>
            <h1>Profile</h1>
            <label>ID:</label>
            <span><%= student.id %></span><br>
            <label>Name:</label>
            <span><%= student.name %></span><br>
            <label>Age:</label>
            <span><%= student.age %></span><br>
            <label>Grade:</label>
            <span><%= student.grade %></span><br>
            <label>Address:</label>
            <span><%= student.address ? (student.address.street + ', ' + student.address.city + ', ' +
                student.address.state + ' ' + student.address.zip) : 'No address available' %></span><br>
            <label>Phone:</label>
            <span><%= student.phone %></span><br>
            <label>Email:</label>
            <span><%= student.Email %></span><br>
        </div>

        <div class="table-container">
            <h2>Courses</h2>
                <table class="table" border="2">
                    <thead>
                        <tr>
                            <th>Course ID</th>
                            <th>Course Name</th>
                            <th>Teacher Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% courses.forEach(course => { %>
                            <tr>
                                <td><%= course.course_id %></td>
                                <td><%= course.course_name %></td>
                                <td><%= course.teacher.name %></td>
                            </tr>
                        <% }); %>
                    </tbody>
                </table>
            </div>
        </div>
        <section class="attendance-status">
            <h2>Attendance Status</h2>
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <% attendance.forEach(record => { %>
                        <tr>
                            <td><%= record.date %></td>
                            <td><%= record.status %></td>
                        </tr>
                    <% }) %>
                </tbody>
            </table>
        </section>
    </main>
    <script src="js-file/script.js"></script>
</body>

</html>