{{ $file := .file }}
{{ $context := .context }}
{{ with $context.Resources.GetMatch $file }}
<div class="whiteboard" style="width: {{ .Params.width }}; height: {{ .Params.height }}">
  <div class="whiteboard-surface">
    <div class="whiteboard-title">{{ .Title }}</div>
    <div class="whiteboard-content">
      {{ .Content }}
    </div>
    {{ if .Params.sticky_notes }}
    <div class="wb-notes">
      {{ range $index, $note := .Params.sticky_notes }}
      {{ if lt $index 3 }}
      <div class="wb-note wb-note-{{ $note.color | default "yellow" }}">
        <div class="wb-note-content">{{ $note.text | markdownify }}</div>
      </div>
      {{ end }}
      {{ end }}
    </div>
    {{ end }}
    {{ if .Params.media_items }}
    <div class="wb-media">
      {{ range $index, $item := .Params.media_items }}
        {{ if lt $index 6 }}
          {{ $image := resources.Get $item.image }}
          {{ if $image }}
            {{ $resized := $image.Fit "240x360" }}
            <div class="wb-media-item">
              <div class="wb-media-pin"></div>
              <img src="{{ $resized.RelPermalink }}" alt="{{ $item.title }}" class="wb-media-cover" width="{{ $resized.Width }}" height="{{ $resized.Height }}" />
              {{ if $item.current }}
                <div class="wb-media-label">NOW</div>
              {{ end }}
            </div>
          {{ end }}
        {{ end }}
      {{ end }}
    </div>
    {{ end }}
  </div>
</div>
{{ end }}