<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flight Reviews</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app" class="review-page">
    <header class="app-header">
        <button class="logout-btn" @click="logout">Log Out</button>
    </header>

    <div class="main-content">
        <div class="review-container">
            <h1>Flight Reviews</h1>

            <div class="review-list">
                <div v-for="review in reviews" :key="review.id" class="review-item">
                    <h3>{{ review.subject }}</h3>
                    <p>{{ review.description }}</p>
                    <span>{{ review.date }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            reviews: [
                {
                    id: 1,
                    subject: 'Great experience!',
                    description: 'The flight was amazing, the service was excellent, and the views were breathtaking.',
                    date: '2025-02-01',
                },
                {
                    id: 2,
                    subject: 'Good but delayed',
                    description: 'The flight was comfortable, but it was delayed by two hours, which caused some inconvenience.',
                    date: '2025-02-02',
                },
                {
                    id: 3,
                    subject: 'Okay, but not perfect',
                    description: 'Everything was fine, but the food options could have been better.',
                    date: '2025-02-03',
                },
            ]
        },
        methods: {
            logout() {
                // Logic to log out the user, e.g., clearing session or redirecting to home page
                window.location.href = '/'; // Redirecting to home page
            }
        }
    });
</script>

</body>
</html>
