<template>
  <div class="settings-view">
    <div class="settings-header">
      <GnIconButton
        icon="ph ph-list"
        label="Toggle sidebar"
        class="settings-sidebar-toggle"
        @click="emit('toggle-sidebar')"
      />
      <h1 class="settings-title">Settings</h1>
    </div>
    <div class="settings-body">
      <ApiKeysPanel />
    </div>
  </div>
</template>

<script setup>
import ApiKeysPanel from './ApiKeysPanel.vue'

const emit = defineEmits(['toggle-sidebar'])
</script>

<style scoped lang="scss">
.settings-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #3b4261);
  background: var(--surface-panel, #1f2335);
}

.settings-sidebar-toggle {
  display: none;
  @media (max-width: 1280px) {
    display: flex;
  }
}

.settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, #a9b1d6);
}

.settings-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 20px;
}
</style>