<template>
  <div class="create-new-node-container">
    <h3 class="sub-header">Create new supplier</h3>
    <form @submit.prevent="send">
      <div class="create-new-node-form-container">
        <div class="input-field-caption">Name:</div>
        <div><div class="text-container"><input class="input-field" v-model="nodeName"/></div></div>
        <div></div>
        <div class="input-field-caption">Address:</div>
        <div><div class="text-container"><input class="input-field" v-model="nodeAddress"/></div></div>
        <div>
          <basic-button icon="SealCheck">Verify address</basic-button>
        </div>
        <div class="input-field-caption">Coordinates:</div>
        <div>{{ nodeCoordinates }}</div>
      </div>
      <div class="create-new-node-map">
        <img width="300px" src="https://www.galerie-braunbehrens.de/wp-content/uploads/2020/06/placeholder-google-maps.jpg" alt="map">
      </div>
      <div class="create-new-node-footer">
        <basic-button variant="primary" :show-icon="false" :disabled="unverified">OK</basic-button>
        <basic-button @click.prevent="cancel" variant="secondary" :show-icon="false">Cancel</basic-button>
      </div>
    </form>
  </div>
</template>

<script>

import BasicButton from "@/components/UI/BasicButton.vue";

export default {
  name: "CreateNewNode",
  components: {BasicButton},
  data() {
    return {
      nodeName: "",
      nodeAddress: "",
      nodeCoordinates: "",
      addressVerified: false
    }
  },
  computed: {
    unverified() {
      return !this.addressVerified;
    }
  },
  methods: {
    send() {
      console.log("Sending...");

    },
    cancel() {
      this.$emit("close");
    }
  }
}
</script>

<style scoped>

.create-new-node-map {
  display: flex;
  justify-content: center;
}

.sub-header {
  font-weight: normal;
  font-size: 1.4rem;
  color: #6B869C;
  margin-bottom: 1.6rem;
}

.input-field-caption{
  font-size: 1.2rem;
  font-weight: 500;
  align-self: center;
  justify-self: end;
  color: #001D33
}

.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 0 auto;
}

.text-container:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  /*transform: translateY(2px);*/
  transform: scale(1.01);
}


.create-new-node-container {
  width: 60rem;
}

.create-new-node-footer {
  display: flex;
  gap: 1.6rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.create-new-node-form-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.6rem;

}

</style>