---
layout: base.njk
---

{% set service = services | getServiceById(key) %}
{% if service %}
    <h1><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung"></a></h1>

    <div class="row">
        <div class="col-lg-8 col-12">
            {{ content | safe }}
        </div>
        <div class="col-lg-4 col-12">
            <div class="tab-card">
                <div class="title"><h1 class="text-center fw-bold">sp-codes</h1></div>
                <div class="card">
                    Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href="https://matrix.sp-codes.de">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href="https://chat.sp-codes.de" target="_blank">chat.sp-codes.de</a>
                    <div class="text-center mt-2">
                        <a class="btn btn-primary" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
                    </div>
                </div>
            </div>
            {% if service.ossrox %}
            <div class="tab-card ossrox">
                <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
                <div class="card">
                    {{service.ossrox.description[locale]}}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% else %}
    Service not found
{% endif %}