{% extends "./base.njk" %}

{% block body %}
<div class="col col--1-3">
  <h2>Simple Vue Component (Why would you do this?)</h2>
  <p><em>Being a SSR Vue component that does nothing but render from a prop</em></p>
  {% vue { component:"HelloWorld" } %}
  {% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
  {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
</div>
<div class="col col--1-3">
  <h2>Todo List</h2>
  <p><em>Being a pretty standard interactive component. Also SSR rendered.</em></p>
  {% vue { component:"ListComp"} %}
  {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
</div>
<div class="col col--1-3">
  <h2>Music Player</h2>
  <p><em>Being a pretty standard interactive component.</em></p>
  {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
  <p>Hearse Pileup: Last Time</p>
  {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
  <p>Hearse Pileup: Generation Y</p>
  {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
  <p>Hearse Pileup: Pretty Shiny Things</p>
</div>
<div class="col col--1">
  <section id="content" role="main" class="content-wrapper">
    {{content|safe}}
  </section>
</div>
{% endblock %}