{% macro card(a) %}
<div class="card" data-slug="{{ a.slug }}" data-search="{{ (a.name ~ ' ' ~ a.desc ~ ' ' ~ a.host ~ ' ' ~ a.group)|lower }}">
  <a class="card-link" href="{{ a.url }}" aria-label="{{ a.name }}"></a>
  <button type="button" class="fav{% if a.slug in favorites %} on{% endif %}" data-slug="{{ a.slug }}"
          aria-pressed="{{ 'true' if a.slug in favorites else 'false' }}" title="Markér som favorit" aria-label="Favorit">★</button>
  <div class="head">
    <span class="ico">{% if a.icon and a.icon.startswith('http') %}<img src="{{ a.icon }}" alt="">{% else %}{{ (a.name or '?')[0]|upper }}{% endif %}</span>
    <span class="name">{{ a.name }}</span>
  </div>
  <div class="sub" title="{{ a.desc if a.desc else a.host }}">{{ a.desc if a.desc else a.host }}</div>
  <div class="go">Åbn →</div>
</div>
{% endmacro %}
{% if error %}<div class="err">{{ error }}</div>{% endif %}
{% if podcasts or erindringer %}
<section class="appgroup" id="podsec">
  <h2>🎙️ Familiens podcast</h2>
  <div class="grid">
    {% for p in podcasts %}
    <div class="card" data-search="podcast {{ (p.titel ~ ' ' ~ p.nyeste.titel)|lower }}">
      <a class="card-link" href="/podcast" aria-label="{{ p.titel }}"></a>
      <div class="head"><span class="ico">🎙️</span><span class="name">{{ p.titel }}</span></div>
      <div class="sub" title="{{ p.nyeste.titel }}">{{ p.antal }} episode{{ 'r' if p.antal != 1 }} · nyeste: {{ p.nyeste.titel }}</div>
      <div class="go">Lyt →</div>
    </div>
    {% endfor %}
    {% if erindringer %}
    <div class="card" data-search="erindringer dagbog minder interview">
      <a class="card-link" href="/erindringer" aria-label="Erindringer"></a>
      <div class="head"><span class="ico">🎤</span><span class="name">Erindringer</span></div>
      <div class="sub">Fortæl dine minder eller før dagbog. En interviewer stiller spørgsmålene.</div>
      <div class="go">Fortæl →</div>
    </div>
    {% endif %}
  </div>
</section>
{% endif %}
{% if groups %}
<div class="toolbar">
  <div class="filter"><span class="mag">⌕</span>
    <input id="appfilter" type="search" placeholder="Filtrér…" autocomplete="off" aria-label="Filtrér tjenester"></div>
  <div class="viewtoggle" role="group" aria-label="Visning">
    <button type="button" data-view="grouped" class="{{ 'on' if view != 'alpha' }}">Grupperet</button>
    <button type="button" data-view="alpha" class="{{ 'on' if view == 'alpha' }}">Alfabetisk</button>
  </div>
</div>
<section id="favsec" class="appgroup"{% if not fav_apps %} style="display:none"{% endif %}>
  <h2>★ Favoritter</h2>
  <div class="grid" id="favgrid">{% for a in fav_apps %}{{ card(a) }}{% endfor %}</div>
</section>
{% if mc_servers %}
<section class="appgroup" id="mcsec">
  <h2>⛏️ Minecraft-servere</h2>
  <div class="grid">
    {% for s in mc_servers %}
    <div class="card" data-search="minecraft {{ (s.name ~ ' ' ~ s.version ~ ' ' ~ s.status)|lower }}">
      <a class="card-link" href="{{ disco_url }}" aria-label="{{ s.name }} i DiscoPanel"></a>
      <div class="head"><span class="ico">⛏️</span><span class="name">{{ s.name }}</span></div>
      <div class="sub" title="{{ s.version }}">
        <span class="mcdot {{ s.css }}"></span>{{ s.status }}
        {%- if s.online %} · {{ s.players }}/{{ s.max_players }} spillere{% endif %}
        {%- if s.version %} · {{ s.version }}{% endif %}
      </div>
      <div class="go">Åbn DiscoPanel →</div>
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}
<div id="view-grouped"{% if view == 'alpha' %} hidden{% endif %}>
  {% for g in groups %}
  <section class="appgroup"><h2>{{ g.name }}</h2><div class="grid">{% for a in g.apps %}{{ card(a) }}{% endfor %}</div></section>
  {% endfor %}
</div>
<div id="view-alpha"{% if view != 'alpha' %} hidden{% endif %}>
  <section class="appgroup"><h2>Alle tjenester</h2><div class="grid">{% for a in apps_sorted %}{{ card(a) }}{% endfor %}</div></section>
</div>
<p id="nomatch" class="muted" style="display:none;margin-top:1rem">Ingen tjenester matcher.</p>
{% elif not error %}
<p class="muted" style="margin-top:1.6rem">Ingen apps fundet for din konto endnu.</p>
{% endif %}