<template>
  <div class="settings">
    <h2>Settings</h2>
    <form @submit.prevent="saveSettings">
      <div class="form-group">
        <label for="authorization">Authorization</label>
        <input type="text" id="authorization" v-model="settings.authorization">
      </div>
      <div class="form-group">
        <label for="semesterId">Semester ID</label>
        <input type="text" id="semesterId" v-model="settings.semesterId">
      </div>
      <div class="form-group">
        <label for="xRole">X-Role</label>
        <input type="text" id="xRole" v-model="settings.xRole">
      </div>
      <div class="form-group">
        <label for="xSchoolId">X-School-ID</label>
        <input type="text" id="xSchoolId" v-model="settings.xSchoolId">
      </div>
      <div class="form-group">
        <label for="xReflectionId">X-Reflection-ID</label>
        <input type="text" id="xReflectionId" v-model="settings.xReflectionId">
      </div>
      <button type="submit">Save</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useSettingsStore } from '../store/settings';

const settingsStore = useSettingsStore();
const settings = ref({
  authorization: settingsStore.authorization,
  semesterId: settingsStore.semesterId,
  xRole: settingsStore.xRole,
  xSchoolId: settingsStore.xSchoolId,
  xReflectionId: settingsStore.xReflectionId,
});

const saveSettings = () => {
  settingsStore.setSettings(settings.value);
  alert('Settings saved!');
};
</script>

<style scoped>
.settings {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--card-background-color);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: var(--border-radius);
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 16px;
}

button:hover {
  background-color: #36a374;
}
</style>