---
layout: base.njk
---

<div class="row">
    <div class="col-lg-8 col-12 article-content">
        {% if tags %}
        <div class="mb-2">
            {% for tag in tags %}
            <span class="badge bg-primary text-black">{{tag}}</span>
            {% endfor %}
        </div>
        {% endif %}
        {{ content | safe }}
    </div>
    <div class="col-lg-4 col-12">
        {% if series %}
        <div class="tab-card">
            <div class="title">{{ strings.article.seriesParts }}</div>
            <div class="card">
                {%- for post in collections.series[series] %}
                <div class="p-2">
                    <a href="{{ post.url | url }}"
                       class="list-group-item list-group-item-action{% if post.url == page.url %} fw-bold{% endif %}">
                        {{ post.data.title }}
                    </a>
                </div>
                {%- endfor %}
            </div>
        </div>
        {% endif %}
        {% if service %}
        <div class="tab-card">
            <div class="title">{{ strings.article.relatedService }}</div>
            <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.title}}"
                                 src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung">
                        </a>
                    </div>
                    {% endif %}
                    <div>{{service.summary[locale]}}</div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="tab-card">
            <div class="title">{{ strings.article.questions }}</div>
            <div class="card">{{ strings.article.questionsContent | safe }}</div>
        </div>
        <div class="tab-card">
            <div class="title">{{ strings.article.aboutMe }}</div>
            <div class="card">{{ strings.article.aboutMeContent | safe }}</div>
        </div>
        <div class="tab-card">
            <div class="title">{{ strings.article.yourOpinion }}</div>
            <div class="card">
                <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
                    <div class="m-2"><a href="mailto:mail@sp-codes.de">
                        <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
                        <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
                    </a></div>
                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
                        <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
                        <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
                    </a></div>
                    <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
                        <span class="d-none d-md-inline-block i-mastodon i-4x i-fw"></span>
                        <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
                    </a></div>
                </div>
            </div>
        </div>
    </div>
</div>
