<script lang="ts">
	import Icon from "./Icon.svelte";

  export let expanded: boolean;
  export let title: string;
  export let disableExpandToggle: boolean = false;

  function toggleExpand() {
    if (!disableExpandToggle) {
      expanded = !expanded;
    }
  }
</script>

<div class="modal-section" class:expanded>
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <div class="modal-section-header" on:click={toggleExpand}>
    <div class="title">{title}</div>
    {#if !disableExpandToggle}
      <Icon block name="{expanded ? "chevron_down" : "chevron_right"}" />
    {/if}
  </div>
  <div class="modal-section-body">
    <slot></slot>
  </div>
</div>

<style lang="sass">
  @import "$lib/css/colors.sass"

  div.modal-section
    margin-left: -1.8ch
    margin-right: -1.8ch
    margin-bottom: 0.5em

    > div.modal-section-body
      display: none
      padding: 0.25em 2.3ch

    > div.modal-section-header
      display: flex
      flex-direction: row
      user-select: none
      padding: 0.5ch 1.6ch
      padding-right: 1.8ch
      color: $color-main4

      > div.title
        margin-left: 0.5ch
        font-size: 0.9em
        color: $color-main5
        margin-right: auto
    
    &.expanded
      background-color: $color-mainhalf

      > div.modal-section-body
        display: block

      > div.modal-section-header
        color: $color-main5
        > div.title
          color: $color-main9
</style>