<template>
  <section class="bottom-panel" :class="{ 'is-collapsed': collapsed }">
    <header class="bottom-panel-header">
      <slot name="header"></slot>
    </header>
    <button class="iconbtn bottom-panel-toggle" type="button" @click="toggle">{{ collapsed ? "▴" : "▾" }}</button>
    <div v-show="!collapsed" class="bottom-panel-body">
      <slot />
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:collapsed"]);

function toggle() {
  emit("update:collapsed", !props.collapsed);
}
</script>

<style scoped>
.bottom-panel {
  position: absolute;
  left: 370px;
  right: 16px;
  bottom: 100px;
  height: 390px;
  border-radius: 18px;
  border: 1px solid rgba(83, 214, 206, 0.24);
  background:
    radial-gradient(420px 180px at 14% 0%, rgba(83, 214, 206, 0.2), transparent 66%) padding-box,
    radial-gradient(520px 220px at 82% 0%, rgba(40, 156, 228, 0.14), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(18, 33, 40, 0.94), rgba(14, 24, 31, 0.9)) padding-box;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(83, 214, 206, 0.14) inset;
  overflow: hidden;
  z-index: 26;
}

.bottom-panel.is-collapsed {
  height: 70px;
}

.bottom-panel-header {
  padding: 12px 52px 12px 12px;
  border-bottom: 1px solid rgba(83, 214, 206, 0.28);
  background:
    radial-gradient(380px 120px at 18% 0%, rgba(83, 214, 206, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(25, 137, 124, 0.86), rgba(16, 66, 82, 0.64));
}

.bottom-panel-toggle {
  position: absolute;
  right: 12px;
  top: 12px;
}

.iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.42);
  color: rgba(11, 27, 58, 0.86);
  font-weight: 900;
  cursor: pointer;
}

.bottom-panel-body {
  padding: 0 12px 12px;
  overflow: auto;
  height: calc(100% - 66px);
}

@media (max-width: 1300px) {
  .bottom-panel {
    left: 330px;
  }
}
</style>
