{% extends "_base" %}
{% block main %}
<h1>Services</h1>
<div class="flex flex-row flex-wrap place-content-center place-items-center">
    {% for service in services %}
    <a href="https://{{ service.domain }}/"
        class="flex flex-col basis-11/12 md:basis-5/12 xl:basis-3/12 rounded-lg p-4 m-4 h-60 hover:scale-105 transition bg-surface dark:bg-surface-dark border hover:border-2 border-base-dark dark:border-surface-dark hover:border-surface-dark dark:hover:border-surface">
        <div class="flex flex-row flex-center basis-1/3">
            <img src="/assets/images/{{ service.name | lower }}.png" alt="{{ service.name }} logo"
                class="w-16 dark:hidden">
            <img src="/assets/images/{{ service.name | lower }}-dark.png" alt="{{ service.name }} logo"
                class="w-16 hidden dark:inline-block">
            <div class="flex flex-col justify-center ml-4">
                <h3>{{ service.name }}</h3>
                <p class="text-subtle dark:text-subtle-dark">{{ service.domain }}</p>
            </div>
        </div>
        <p class="mt-4 basis-1/3">{{ service.description }}</p>
        <div class="flex flex-row items-end basis-1/3">
            <button class="rounded-lg h-7 px-4 text-center text-text-dark bg-overlay dark:bg-overlay-dark"><i
                    class="fa-solid fa-code"></i> {{ service.language }}
            </button>
        </div>
    </a>
    {% endfor %}
</div>
{% endblock %}