"use strict";

const app = Vue.createApp({
    data() {
        return {
            friends: [
                {
                    id: "manuel",
                    name: "Manuel Lorenz",
                    phone: "01234 5678 991",
                    email: "manuel@localhost.com",
                },
                {
                    id: "julie",
                    name: "Julie Jones",
                    phone: "09876 543 221",
                    email: "julie@localhost.com",
                },
            ],
        };
    },
});

// use multiword component names
app.component("user-contact", {
    template: `
            <li>
                <h2>{{ friend.name }}</h2>
                <button @click="toggleDetails()">Show Details</button>
                <ul v-if="detailsAreVisible">
                    <li><strong>Phone:</strong> {{ friend.phone }}</li>
                    <li><strong>Email:</strong> {{ friend.email }}</li>
                </ul>
            </li>
    `,
    data() {
        return {
            detailsAreVisible: false,
            friend: {
                id: "manuel",
                name: "Manuel Lorenz",
                phone: "01234 5678 991",
                email: "manuel@localhost.com",
            },
        };
    },
    methods: {
        toggleDetails() {
            this.detailsAreVisible = !this.detailsAreVisible;
        },
    },
});

app.mount("#app");