<template>
    <div id="main">
        <div id="userMenu">
            <!-- deconnect -->
        </div>
        <span class="divider"></span>
        <Account v-for="(account, index) in accounts" :key="index" :data="account" />
        <span class="divider"></span>

        <AddAccountModal />
    </div>
</template>

<script>
import { mapState } from "vuex";
import Account from "./Account";
import AddAccountModal from "../../modals/AddAccountModal";
import store from "@/store/store";

export default {
    name: "Accounts",
    components: {
        Account,
        AddAccountModal,
    },
    computed: {
        ...mapState(["accounts"]),
    },
    created() {
        store.dispatch("fetchAccounts");
    },
};
</script>

<style scoped>
#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: #2a2a33;
    color: white;
}

#userMenu {
    width: 32px;
    height: 32px;
    background-color: yellow !important;
}
.divider {
    border-top: 1px solid #bbb;
    margin: 5px 0;
    width: 90%;
}
</style>
