computer-playbook/roles/web-app-littlejs/templates/html/main.html.j2

<main class="container py-4">
  <header class="mb-4">
    <h1 class="h3 mb-2">{{ LITTLEJS_HEADLINE }}</h1>
    <p class="text-secondary small mb-0">
      Browse and launch LittleJS demos rendered dynamically through {{ SOFTWARE_NAME }}.
    </p>
  </header>

  <section>
    <div class="row g-4">

      {% for key, cat in littlejs_examples|dictsort %}
        {% for ex in cat['items'] %}
          {% set href = ex | littlejs_href(lookup('tls', application_id, 'protocols.web'), domain) %}
          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <div class="card app-card h-100">
              <div class="card-body d-flex flex-column">

                <div class="d-flex justify-content-between align-items-start mb-3">
                  <div class="app-icon text-primary-emphasis">
                    <i class="{{ ex.icon }}"></i>
                  </div>
                  <span class="badge rounded-pill bg-primary-subtle text-primary app-badge">
                    {{ cat.label|replace('---','')|trim }}
                  </span>
                </div>

                <h2 class="h5 mb-2">{{ ex.name }}</h2>

                {% if ex.description %}
                <p class="small text-secondary mb-3">{{ ex.description }}</p>
                {% endif %}

                {% if ex.tags %}
                <p class="small text-muted mb-3">{{ ex.tags }}</p>
                {% endif %}

                <div class="mt-auto">
                  <a href="{{ href }}" class="btn btn-primary app-footer-btn">
                    <i class="{{ ex.icon }} me-2"></i>Start {{ ex.name }}
                  </a>
                </div>

              </div>
            </div>
          </div>

        {% endfor %}
      {% endfor %}

    </div>
  </section>
</main>