{% extends "templates/base.html" %}
{% from "www/macros/livecode.html" import LiveCodeEditor, LiveCodeEditorJS %}

{% block title %}Sketches{% endblock %}
{% block head_include %}
	<meta name="description" content="Sketches" />
	<meta name="keywords" content="sketches" />
  <link rel="stylesheet" href="/assets/css/lms.css">
{% endblock %}

{% block content %}
<section class="top-section" style="padding: 1rem 0rem;">
	<div class='container pb-5'>
		<h1>Recent Sketches</h1>

    <a href="/sketches/new">Create a New Sketch</a>
	</div>
	<div class='container'>
    <div class="row row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 ">
    {% for sketch in sketches %}
    <div class="col mb-4">
      <div class="card sketch-card" style="width: 200px;">
      <div class="card-img-top">
        <a href="/sketches/{{sketch.name}}">
        {{ sketch.to_svg() }}
        </a>
      </div>
      <div class="card-footer">
        <div class="sketch-title">
          <a href="sketches/{{sketch.name}}">{{sketch.title}}</a>
        </div>
        <div class="sketch-author">
          by {{sketch.get_owner_name()}}
        </div>
      </div>
      </div>
    </div>
    {% endfor %}
    </div>
	</div>
</section>
{% endblock %}

{% block style %}
  {{super()}}
  <style type="text/css">
    svg {
      width: 200px;
      height: 200px;
    }
  </style>
{% endblock %}