{% extends "base.html" %}

{% block title %}Content templates · LibreSignage{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('content.static', filename='css/content.css') }}">
{% endblock %}

{% block content %}
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
    <div>
      <h1 class="mb-1">Content templates</h1>
      <p class="text-body-secondary mb-0">
        Start with an accessible design, then substitute your words, colors, and image.
      </p>
    </div>
    <div class="d-flex gap-2"><a class="btn btn-outline-primary" href="{{ url_for('content.brand_kits') }}">Brand kits</a><a class="btn btn-outline-secondary" href="{{ url_for('content.index') }}">Content library</a></div>
  </div>

  <div class="row g-4">
    {% for template in templates %}
      <div class="col-md-6 col-xl-4">
        <article class="card h-100">
          <div class="template-thumbnail template-thumbnail-{{ template.slug }}">
            <span>{{ template.name }}</span>
          </div>
          <div class="card-body d-flex flex-column">
            <h2 class="h5">{{ template.name }}</h2>
            <p class="text-body-secondary flex-grow-1">{{ template.description }}</p>
            <a
              class="btn btn-primary"
              href="{{ url_for('content.template_editor', template_slug=template.slug) }}"
            >
              Use this template
            </a>
          </div>
        </article>
      </div>
    {% endfor %}
  </div>
{% endblock %}