<template>
    <main>
    <EditProfile></EditProfile>
        <EditAccount></EditAccount>
    </main>
</template>
<script setup>

import EditProfile from "../components/EditProfile.vue";
import EditAccount from "../components/EditAccount.vue";
</script>


<script>
import {mapStores} from "pinia";
import {Icon} from "@iconify/vue";
import {API} from "@/util/API";
import { useAuthStore } from "@/stores/authStore";
import router from "../router";
export default {
    name: "ProfileSettings",
    components: {Icon},
    computed: {
        ...mapStores(useAuthStore),
        iconColor() {
            return "#000000"
        },
    },
    beforeMount() {
        if (!useAuthStore().isLoggedIn) {
            router.push('/login')
        }
    },
}
</script>

<style scoped lang ="scss">
main {
  background-color: white;
  color:black;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: left;
  left:0;
}

#profilepicture-container {
    display:flex;
    border-radius:50%;
    width:100px;
    height: 100px;
    background-color: white;
    justify-content: center;
    align-items: center;
    border: 3px solid base.$grey;
}

img {
  border-radius: 50%;
}

#changeUserImage {
    display:flex;
}

#changeUserImage #profilepicture-container {
  width: 50px;
  height: 50px;
}

.infoText {
  background-color: white;
  padding: .5em;
  margin: .4em;
}

form {
    background-color: base.$grey;
    color: black;
    align-content: end;
    padding: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
}

input[type="text"],
input[type="password"]{
    width: 100%;
    padding: .5em;
}
#submitbuttonBox {
    display:flex;
    justify-content: space-between;
}
button {
    background-color: base.$red;
    color: black;

    border: 1px solid black;

    margin: 1em;
}


#changeUserBtn {
    padding:.9em;

}
button:hover{
   background-color: #282828;

 }

.saveBtn, .delBtn {
  background-color: base.$green;
  color: white;
  font-weight: bold;
  padding:.9em;
  border:none;
}
.delBtn {
  background-color: darkred;
}

#dangerZone {
  color: darkred;
}
</style>