<template>
  <div class="settings-view">
    <GnPageHeader title="Settings" compact class="settings-header">
      <template #actions>
        <GnIconButton
          icon="ph ph-list"
          label="Toggle sidebar"
          class="settings-sidebar-toggle"
          @click="emit('toggle-sidebar')"
        />
      </template>
    </GnPageHeader>
    <div class="settings-body">
      <ApiKeysPanel />
      <NotificationSettingsPanel />
      <SynapseReactionsPanel />
      <SynapseTargetsPanel />
    </div>
  </div>
</template>

<script setup>
import ApiKeysPanel from './ApiKeysPanel.vue'
import NotificationSettingsPanel from './NotificationSettingsPanel.vue'
import SynapseReactionsPanel from './SynapseReactionsPanel.vue'
import SynapseTargetsPanel from './SynapseTargetsPanel.vue'

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

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

.settings-header {
  flex-shrink: 0;
  width: 100%;
  max-width: 1200px;
  margin: 12px auto 0;
}

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

.settings-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>