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

  // I'm sure there's a fancy way to do this but whatever
  const make_dates = () => {
    let days = [];
    for(let i = 0; i < 31; i++) {
      days.push(i);
    }
    return days;
  }
</script>
<style>
  content {
    display: flex;
    flex: flex-shrink;
    flex-grow: 1;
    justify-content: center;
  }

  calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto;
    max-width: 300px;
    outline: 1px solid var(--color-accent);
  }

  calendar day {
    background-color: var(--color-bg-secondary);
    font-weight: bold;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  calendar month {
    grid-column: span 7;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
  }


  calendar date {
    padding: 0.3rem;
  }

  calendar date:hover {
    background-color: var(--color-bg-secondary);
  }
</style>

<content>
  <calendar>
  <month>December</month>
  <day>Sun</day><day>Mon</day><day>Tue</day><day>Wed</day><day>Thu</day><day>Fri</day><day>Sat</day>
  {#each make_dates() as date}
    <date>{date}</date>
  {/each}
  </calendar>
</content>

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