<script>
  import CodeView from '../components/CodeView.svelte';
  import Icon from '../components/Icon.svelte';

  import { holder } from '../../lib/imgholder.js';
</script>
<style>
  content {
    display: flex;
    flex: flex-shrink;
    flex-grow: 1;
    justify-content: center;
  }

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

  card top img {
    padding: 0;
    margin: 0;
    width: 480px;
  }

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

  card middle h4 {
    margin: 0;
  }

  card bottom {
    flex-shrink: 0;
  }

  card bottom button {
    padding: 0.2rem;
  }
</style>

<content>
  <card>
    <top>
      <img src={ holder(16 * 30, 9 * 30) }/>
    </top>

    <middle>
      <h4>
        Card Example
      </h4>
      <p>Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </middle>

    <bottom>
    <button><Icon name="check-circle" color="var(--color-bg)" size="24" /></button>
    <button><Icon name="x-circle" color="var(--color-bg)"  size="24"/></button>
    </bottom>
  </card>
</content>

<CodeView source="/code/Cards" notes="/code/Cards.notes.html" />
