---
layout: base.njk
eleventyComputed:
  title: {{service.name}}
  summary: {{service.summary[locale]}}
---

{% set service = services | getServiceById(key) %}
{% if service %}
    <p class="small"><a href="/{{locale}}/services/">{{ strings.service.overview }}</a></p>
    <h1 class="clearfix"><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state.title}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title}}&upLabel={{strings.state.operational}}&downLabel={{strings.state.outage}}&maintenanceLabel={{strings.state.maintenance}}"></a></h1>

    <div class="row">
        <div class="col-lg-8 col-12">
            {{ content | safe }}
        </div>
        <div class="col-lg-4 col-12">
            {% for card in service.cards %}
            <div class="tab-card{% if card.ossrox %} ossrox{% endif %}">
                {% if card.ossrox %}
                <a href="{{ card.ossrox.url }}" class="link"></a>
                <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
                {% else %}
                <div class="title"><h2 class="text-center fw-bold">{{ card.title[locale] }}</h1></div>
                {% endif %}
                <div class="card">
                    {{ card.content[locale] | safe }}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
{% else %}
    Service not found
{% endif %}