{% extends "base.html" %}

{% block title %}Integrations - Lamb{% endblock %}

{% block body %}
<main class="mx-auto max-w-6xl px-4 py-7 sm:px-6 lg:px-8">
    {% include "_page_header.html" with header_label="Control Room" header_title="Integrations" header_description="Connect your services and decide what Lamb can sync and automate." %}

    {% if messages %}
    <section class="mb-6 space-y-3">
        {% for message in messages %}
        <div class="sketch-border alert {% if message.tags == 'error' %}alert-error{% elif message.tags == 'success' %}alert-success{% else %}alert-info{% endif %} bg-base-100">
            <span>{{ message }}</span>
        </div>
        {% endfor %}
    </section>
    {% endif %}

    <section class="flex flex-col gap-4">
        {% include "integrations/_google_calendar_card.html" %}
        {% include "integrations/_slack_card.html" %}
        {% include "integrations/_ai_provider_card.html" %}
        {% include "integrations/_clock_card.html" %}
    </section>
</main>

<div id="modal-container"></div>
{% endblock %}