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

{% block title %}{{ _('Recurring Tasks') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Recurring Tasks')}
] %}

{{ page_header(
    icon_class='fas fa-redo',
    title_text=_('Recurring Tasks'),
    subtitle_text=_('Automated task creation templates'),
    breadcrumbs=breadcrumbs
) }}

<div class="mb-4 flex justify-end">
    <a href="{{ url_for('recurring_tasks.create_recurring_task') }}" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors">
        <i class="fas fa-plus mr-1"></i>{{ _('Create Recurring Task') }}
    </a>
</div>

{% if recurring_tasks %}
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-border-light dark:border-border-dark">
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Name') }}</th>
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Project') }}</th>
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Frequency') }}</th>
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Next Run') }}</th>
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Status') }}</th>
                    <th class="text-left p-3 text-sm font-semibold">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for task in recurring_tasks %}
                <tr class="border-b border-border-light dark:border-border-dark hover:bg-background-light dark:hover:bg-background-dark">
                    <td class="p-3">
                        <div class="font-medium">{{ task.name }}</div>
                        {% if task.description %}
                        <div class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ task.description[:50] }}{% if task.description|length > 50 %}...{% endif %}</div>
                        {% endif %}
                    </td>
                    <td class="p-3">
                        {% if task.project %}
                        <a href="{{ url_for('projects.view_project', project_id=task.project.id) }}" class="text-primary hover:underline">
                            {{ task.project.name }}
                        </a>
                        {% else %}
                        <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('No project') }}</span>
                        {% endif %}
                    </td>
                    <td class="p-3">
                        <span class="px-2 py-1 rounded text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
                            {{ task.frequency|title }}
                            {% if task.interval > 1 %}
                            ({{ task.interval }})
                            {% endif %}
                        </span>
                    </td>
                    <td class="p-3">
                        {% if task.next_run_date %}
                        <span class="text-sm">{{ task.next_run_date|local_date }}</span>
                        {% else %}
                        <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Not scheduled') }}</span>
                        {% endif %}
                    </td>
                    <td class="p-3">
                        <span class="px-2 py-1 rounded text-xs font-medium
                            {% if task.is_active %}bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200
                            {% else %}bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200
                            {% endif %}">
                            {% if task.is_active %}{{ _('Active') }}{% else %}{{ _('Inactive') }}{% endif %}
                        </span>
                    </td>
                    <td class="p-3">
                        <div class="flex gap-2">
                            <a href="{{ url_for('recurring_tasks.edit_recurring_task', task_id=task.id) }}" class="text-primary hover:text-primary-dark">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="POST" action="{{ url_for('recurring_tasks.delete_recurring_task', task_id=task.id) }}" class="inline" onsubmit="return confirm('{{ _('Are you sure you want to delete this recurring task?') }}');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-red-600 hover:text-red-700">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
{{ empty_state(
    icon='fas fa-redo',
    title=_('No recurring tasks'),
    message=_('Create recurring task templates to automatically generate tasks on a schedule.')
) }}
{% endif %}
{% endblock %}