<script>
  import {
    ColorPicker,
    Body,
    ModalContent,
    Input,
    IconPicker,
  } from "@budibase/bbui"

  export let group
  export let saveGroup
</script>

<ModalContent
  onConfirm={() => saveGroup(group)}
  size="M"
  title="Create User Group"
  confirmText="Save"
>
  <Input bind:value={group.name} label="Team name" />
  <div class="modal-format">
    <div class="modal-inner">
      <Body size="XS">Icon</Body>
      <div class="modal-spacing">
        <IconPicker
          bind:value={group.icon}
          on:change={e => (group.icon = e.detail)}
        />
      </div>
    </div>
    <div class="modal-inner">
      <Body size="XS">Color</Body>
      <div class="modal-spacing">
        <ColorPicker
          bind:value={group.color}
          on:change={e => (group.color = e.detail)}
        />
      </div>
    </div>
  </div>
</ModalContent>

<style>
  .modal-format {
    display: flex;
    justify-content: space-between;
    width: 40%;
  }

  .modal-inner {
    display: flex;
    align-items: center;
  }

  .modal-spacing {
    margin-left: var(--spacing-l);
  }
</style>
