<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;
  }

  tile {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    border: 1px solid #eee;
    max-width: 50vh;  /* only for this display, I'd remove this. */
  }

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

  tile middle h4 {
    margin-top: 0;
    margin-bottom: 0;
  }

  tile right {
    flex-shrink: 0;
  }

  tile right button {
    padding: 0.2rem;
  }
</style>

<content>
  <tile>
    <left>
      <img src={ holder(48, 48) }/>
    </left>

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

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

<CodeView source="/code/Tiles"  notes="/cdoe/Tiles.notes.html" />
