{%- for service in services %}
<div class="col-12 col-md-6 col-lg-4 p-3">
    <div class="card service">
        <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
        {% if service.beta == true %}
        <div class="beta">TEST-PHASE</div>
        {% endif %}
        <div class="inner">
            <i class="{{service.icon}} i-4x i-fw"></i>
            <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                    class="i-external-link"></i></a>{% endif %}</h2>
            {% if service.status %}
            <div class="mb-2">
                <a href="https://status.sp-codes.de" target="_blank">
                    <img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state[locale]}}&upLabel={{strings.operational[locale]}}&downLabel={{strings.outage[locale]}}&maintenanceLabel={{strings.maintenance[locale]}}">
                </a>
            </div>
            {% endif %}
            <div>{{service.summary[locale]}}</div>
        </div>
    </div>
</div>
{%- endfor %}