{% extends "base.html" %}

{% block content %}
  <div class="container">
    <div class="course-header">
      <h1>Sketches</h1>
    </div>

    <div class="row sketches-gallery">
      {% for s in sketches %}
        <div class="col-md-3">
          <div class="sketch-card">
            <div class="sketch-image">
              <a href="#">
                <svg width="300" height="300" viewBox="0 0 300 300" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="150" cy="150" r="150.0"></circle>
                </svg>
              </a>
            </div>
            <div class="sketch-footer">
              <div class="sketch-title">
                <a href="#">{{s.title}}</a>
              </div>
              <div class="sketch-author">
                by {{s.author}}
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
{% endblock %}