{% extends "base.html" %}
{% from "components/ui.html" import page_header, empty_state %}

{% block title %}{{ _('Calendar Integrations') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Calendar', 'url': url_for('calendar.view_calendar')},
    {'text': 'Integrations'}
] %}

{{ page_header(
    icon_class='fas fa-calendar-alt',
    title_text='Calendar Integrations',
    subtitle_text='Sync your calendar with time entries',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("calendar.connect_google") + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-plus mr-2"></i>Connect Google Calendar</a>'
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    {% if integrations %}
    <div class="space-y-4">
        {% for integration in integrations %}
        <div class="border border-border-light dark:border-border-dark rounded-lg p-4">
            <div class="flex justify-between items-start">
                <div class="flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <h3 class="text-lg font-semibold">
                            {% if integration.provider == 'google' or integration.provider == 'google_calendar' %}
                            <i class="fab fa-google text-blue-600 mr-2"></i>Google Calendar
                            {% elif integration.provider == 'outlook' or integration.provider == 'outlook_calendar' %}
                            <i class="fab fa-microsoft text-blue-500 mr-2"></i>Outlook Calendar
                            {% else %}
                            {{ integration.provider|title|replace('_', ' ') }} Calendar
                            {% endif %}
                        </h3>
                        {% if integration.is_active %}
                        <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">{{ _('Active') }}</span>
                        {% else %}
                        <span class="px-2 py-1 text-xs rounded bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">{{ _('Inactive') }}</span>
                        {% endif %}
                    </div>
                    
                    {% if integration.calendar_name %}
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-2">
                        <i class="fas fa-calendar mr-1"></i>{{ integration.calendar_name }}
                    </p>
                    {% elif integration.config and integration.config.get('calendar_id') %}
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-2">
                        <i class="fas fa-calendar mr-1"></i>{{ integration.config.get('calendar_id') }}
                    </p>
                    {% endif %}
                    
                    {% if integration.last_sync_at %}
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">
                        {{ _('Last synced') }}: {{ integration.last_sync_at.strftime('%Y-%m-%d %H:%M') }}
                        {% if integration.last_sync_status %}
                        <span class="ml-2 px-2 py-1 text-xs rounded
                            {% if integration.last_sync_status == 'success' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                            {% elif integration.last_sync_status == 'error' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                            {% else %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% endif %}">
                            {{ integration.last_sync_status|title }}
                        </span>
                        {% endif %}
                    </p>
                    {% endif %}
                </div>
                
                <div class="flex gap-2">
                    {% if integration.provider in ['google_calendar', 'outlook_calendar'] %}
                    <a href="{{ url_for('integrations.view_integration', integration_id=integration.id) }}" class="text-blue-600 hover:text-blue-800" title="{{ _('Manage Integration') }}">
                        <i class="fas fa-cog"></i>
                    </a>
                    {% endif %}
                    {% if integration.is_active %}
                    <form method="POST" action="{{ url_for('calendar.disconnect_integration', integration_id=integration.id) }}" class="inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="text-red-600 hover:text-red-800" onclick="return confirm('{{ _('Are you sure you want to disconnect this integration?') }}')" title="{{ _('Disconnect') }}">
                            <i class="fas fa-unlink"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    {{ empty_state(
        'fas fa-calendar-alt',
        _('No Calendar Integrations'),
        _('Connect your calendar to automatically sync time entries and events.'),
        actions_html='<a href="' + url_for('calendar.connect_google') + '" class="btn btn-primary">' + _('Connect Google Calendar') + '</a>'
    ) }}
    {% endif %}
</div>

<div class="mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
    <h3 class="font-semibold mb-2">{{ _('How Calendar Integration Works') }}</h3>
    <ul class="text-sm text-blue-800 dark:text-blue-200 space-y-1 list-disc list-inside">
        <li>{{ _('Time entries are automatically synced to your calendar') }}</li>
        <li>{{ _('Calendar events can be converted to time entries') }}</li>
        <li>{{ _('Bidirectional sync keeps everything in sync') }}</li>
    </ul>
</div>
{% endblock %}