<template>
  <div class="container">
    <form @submit.prevent="save">
      <panel>
        <text-field v-model="appName" label="Name" />
        <text-field v-model="description" label="Description" />
        <text-field v-model="url" label="URL" />
        <text-field v-model="glyph" label="Glyph" />
        <btn @click="save" label="Save" />
      </panel>
    </form>
  </div>
</template>

<script>
import Panel from "../components/Panel.vue";
import TextField from "../components/TextField.vue";
import Btn from "../components/Button.vue";
import axios from "axios";
export default {
  data() {
    return {
      appName: "app name",
      description: "test description",
      url: "http://example.com",
      glyph: "information",
    };
  },
  components: {
    Panel,
    TextField,
    Btn,
  },
  methods: {
    save() {
      axios.post("/api/applications", {
        appName: this.appName,
        description: this.description,
        glyph: this.glyph,
        url: this.url,
        active: true,
      });
    },
  },
};
</script>

<style>
.container {
  width: 600px;
  margin: auto auto;
}
</style>
