{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/css/index.css">
{% endblock %}

{% block body %}
<header class="page-header">
  <h1>bauke.xyz</h1>
</header>

<main class="page-main userstyles">
  {% for style in styles %}
  <div class="style">
    <div class="header">
      <img src="{{ format!("/userstyles/{}.png", style.metadata.name.to_lowercase().replace(" ", "-"))|safe }}" />
      <h2>{{ style.metadata.name }}</h2>
      <a target="_blank" href="{{ style.metadata.update_url|safe }}">Install</a>
    </div>

    <p>{{ style.metadata.description }}</p>
  </div>
  {% endfor %}
</main>
{% endblock %}