<script>
   import {
      slide
   } from 'svelte/transition';
   import NextIcon from "./NextIcon.svelte"
   export let name = "";
   export let value = "";
   export let open = false;
   export let highlight = false;

   function toggleOpen(ev) {

   }
</script>

<style>
   .root:hover {
      background-color: rgba(0, 0, 0, 0.04);
   }

   .container {
      display: flex;
      flex-direction: row;
   }

   .values {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      max-width: calc(100% - var(--default-font-size) - 16px);
   }

   .values>div:first-child {
      transform-origin: left;
      transform: scale(0.95);
      margin-right: 24px;
      font-weight: 500;
   }

   .values>div:nth-child(2) {
      color: black;
   }

   :global(svg) {
      margin: auto 8px auto 8px;
      height: var(--default-font-size);
      min-width: var(--default-font-size);
   }

   .body {
      box-sizing: border-box;
      padding: .1px;
      margin-top: 2rem;
   }

   @media (min-width: 45rem) {
      .values {
         flex-direction: row;
      }

      .values>div:first-child {
         transform: unset;
         flex-basis: 120px;
         min-width: 120px;
      }
   }

   .highlight-element {
      background-color: #7bff003b;
   }
</style>

<div class="root" class:highlight-element={highlight}>
   <div class="container" on:click={()=>open=!open}>
      <div class="values">
         <div>{name}</div>
         <div>
            {#if Array.isArray(value)}
               {#each value as v, i}
                  {v}
                  {#if i < value.length - 1}
                  <br/>
                  {/if}
               {/each}
            {:else}
               {value}
            {/if}
         </div>
      </div>
      <NextIcon rotation={open ? -90 : 90} />
   </div>
   {#if open}
      <div class="body" transition:slide>
         <slot></slot>
      </div>
   {/if}
</div>