{% extends "base.html" %}
{% block main %}
{% set d = load_data(path="data/uses.json") %}
<h1 class="text-4xl font-bold tracking-tight">Uses</h1>
<p class="mt-4 max-w-2xl text-muted">
  Inspireret af <a class="text-accent hover:underline" href="https://uses.tech" target="_blank" rel="noopener">uses.tech</a>:
  det jeg faktisk bruger. Kort version: alt der kan selvhostes, bliver selvhostet.
</p>

{% for s in d.sections %}
  <section class="mt-10">
    <h2 class="text-sm font-semibold uppercase tracking-widest text-accent">{{ s.title }}</h2>
    <div class="mt-4 space-y-3">
      {% for it in s.items %}
        <div class="wt-card">
          <span class="font-semibold">{{ it.name }}</span>
          <p class="mt-1 text-sm text-muted">{{ it.note }}</p>
        </div>
      {% endfor %}
    </div>
  </section>
{% endfor %}
{% endblock %}