<template>
  <div class="wrapper">
    <div class="has-text-centered">
      <h3 class="title">Settings</h3>
    </div>
    <div class="columns">
      <div class="column is-one-quarter">
        <figure class="image is-128x128 m-auto">
          <img
            class="is-rounded is-avatar"
            src="//external-content.duckduckgo.com/iu/?u=http%3A%2F%2F0.gravatar.com%2Favatar%2F3e9dc6179a412b170e6a8d779a84c341.png&f=1"
          />
        </figure>
        <div class="card m-t-lg">
          <header class="card-header">
            <p class="card-header-title">My Children</p>
          </header>
          <div class="card-content">bla bla bla</div>
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Add a New Child</a>
          </footer>
        </div>
      </div>
      <div class="column">
        <form class="form">
          <div class="field">
            <label class="label">Name</label>
            <div class="control">
              <input class="input" type="text" placeholder="Text input" />
            </div>
          </div>
          <div class="field">
            <label class="label">Email</label>
            <div class="control">
              <input class="input" type="text" placeholder="Text input" />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
let user: {
  avatar?: string;
  email?: string;
  name: string;
  isAdmin: boolean;
} = {
  name: "LOADING...",
  isAdmin: false
};

export default {
  name: "Settings",
  beforeCreate() {},
  async created() {
    const response = await fetch("/users/profile/");
    this.user = await response.json();
  },
  data() {
    return {
      user
    };
  }
};
</script>

