{% 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 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 %}