<script>
  import CodeView from '../components/CodeView.svelte';
  import Icon from '../components/Icon.svelte';
</script>
<style>
  content {
    display: flex;
    flex: flex-shrink;
    flex-grow: 1;
    justify-content: center;
  }

  panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    width: min-content;
  }

  panel top {
    width: 480px; /* sets a header for display */
    padding: 0.5rem;
  }

  panel middle {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  panel middle h4 {
  }

  panel bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  panel bottom button {
    display: flex;
    margin: 0;
    border-radius: unset;
    width: 100%;
    justify-content: space-evenly;
  }

  button:hover {
    filter: invert(20%);
  }

  button#cancel {
    background: unset;
    color: var(--color-text);
  }
</style>

<content>
  <panel>
    <top>
    <h1>Panel is a Card</h1>
    </top>

    <middle>
      <h4>
        Panel Example
      </h4>
      <p>Not sure what the big deal is with the difference between panels and cards
        but I'm doing all the things so here's a panel. Let's say, buttons on a panel
        are different to demonstrate how to make a button strip. </p>
    </middle>

    <bottom>
    <button id="cancel"><Icon name="x-circle" color="var(--color-text)"  size="24"/> CANCEL</button>
    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
    </bottom>
  </panel>
</content>

<CodeView source="/code/Panels" />
