---
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">Alle Teile dieser Serie</div>
            <div class="card">
                {%- for post in collections.all %}
                {% if post.data.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>
                {% endif %}
                {%- endfor %}
            </div>
        </div>
        {% endif %}
        {% set service = services | getServiceById(service) %}
        {% if service %}
        <div class="tab-card">
            <div class="title">Zugehöriger Dienst</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[locale]}}"
                                 src="https://shields.sp-codes.de/endpoint?label={{strings.state[locale]}}&url=https%3A%2F%2Fstatus.sp-codes.de%2Fapi%2Fbadge%3Fservice%3D{{service.status}}%26operational%3D{{strings.operational[locale]}}%26outage%3D{{strings.outage[locale]}}%26maintenance%3D{{strings.maintenance[locale]}}">
                        </a>
                    </div>
                    {% endif %}
                    <div>{{service.summary[locale]}}</div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="tab-card">
            <div class="title">Über mich</div>
            <div class="card">
                <p>
                    Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit
                    hoste ich verschiedene freie <a href="/de/services/">Dienste</a>. Hier schreibe ich Artikel rund um
                    Sicherheit und Datenschutz.
                </p>
                <a href="https://samuel-philipp.de">Mehr erfahren</a>
            </div>
        </div>
        <div class="tab-card">
            <div class="title">Schreib mir deine Meinung</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">
                        <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>