<template>
  <div class="wrapper">
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <p class="subtitle">
            <i class="fa fa-users"></i>&nbsp;My Connections
          </p>
        </div>
      </div>
      <div class="level-right">
        <!-- <div class="level-item">
          <a href="#" class="button is-success">
            <i class="fa fa-plus"></i>&nbsp;Add a new Child
          </a>
        </div>-->
        <div class="level-item">
          <a href="#" class="button is-primary">
            <i class="fa fa-plug"></i>&nbsp;Connect to a child
          </a>
        </div>
      </div>
    </nav>
    <div class="card m-b-lg">
      <div v-for="connection in connections" :key="connection.id">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image is-48x48">
                <img :src="connection.avatar" alt="Placeholder image" class="is-rounded is-avatar" />
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">{{connection.name}}</p>
              <p class="subtitle is-6">@code</p>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="columns">
            <div class="column" v-for="user in connection.linkedUsers" :key="user.id">
              <ChildAvatar :child="user" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
import Services from "../../services/index";
let connections = [];

export default {
  name: "Home",
  components: {
    ChildAvatar
  },
  beforeCreate() {},
  async created() {
    this.connections = await Services.ApiService.getConnections();
    // console.dir(connections);
  },
  data() {
    return {
      connections
    };
  }
};
</script>

