{% extends 'repository/repo_layout.html' %}

{% block title %}Tasks - {{ repo_owner }}/{{ repo_name }} - {{ brand_name }}{% endblock %}

{% block repo_content %}
<div class="flex flex-col space-y-6">
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h1 class="text-2xl font-bold text-white tracking-tight">Tasks</h1>
            <span class="text-zinc-500 text-sm font-medium px-2 py-0.5 rounded-full bg-white/5 border border-white/5">{{
                tasks|length }}</span>
        </div>

        {% if repo.can_write %}
        <button onclick="openModalAnimation(document.getElementById('new-task-modal'))"
            class="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold text-sm shadow-lg shadow-green-500/20 transition-all">
            <i data-lucide="plus-circle" class="h-4 w-4"></i> New Task
        </button>
        {% endif %}
    </div>

    <!-- Search/Filter Bar (matches issues layout) -->
    <div class="flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
        <form action="" method="GET" class="flex-1 relative">
            <input type="hidden" name="status" value="{{ current_status }}">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500"></i>
            <input type="text" name="q" value="{{ search_query }}" placeholder="Search tasks..."
                class="w-full bg-transparent border-none text-sm text-zinc-200 placeholder-zinc-500 pl-10 py-2 focus:ring-0 outline-none">
        </form>
        <div class="flex items-center border-l border-white/5 pl-2 overflow-x-auto scroller-hide">
            <a href="?status=All{% if search_query %}&q={{ search_query }}{% endif %}"
                class="whitespace-nowrap px-3 py-1.5 text-xs font-bold {% if current_status == 'All' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg mr-1 transition-colors">
                All <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ all_count }}</span>
            </a>
            <a href="?status=To Do{% if search_query %}&q={{ search_query }}{% endif %}"
                class="whitespace-nowrap px-3 py-1.5 text-xs font-bold {% if current_status == 'To Do' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg mr-1 transition-colors">
                To Do <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ todo_count }}</span>
            </a>
            <a href="?status=In Progress{% if search_query %}&q={{ search_query }}{% endif %}"
                class="whitespace-nowrap px-3 py-1.5 text-xs font-bold {% if current_status == 'In Progress' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg mr-1 transition-colors">
                In Progress <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ inprogress_count
                    }}</span>
            </a>
            <a href="?status=Done{% if search_query %}&q={{ search_query }}{% endif %}"
                class="whitespace-nowrap px-3 py-1.5 text-xs font-bold {% if current_status == 'Done' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg transition-colors">
                Done <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ done_count }}</span>
            </a>
        </div>
    </div>

    <!-- Tasks List -->
    <div class="rounded-xl border border-white/5 bg-black/20 overflow-hidden min-h-[400px]">
        {% if tasks %}
        <div class="divide-y divide-white/5">
            {% for task in tasks %}
            <div class="p-4 hover:bg-white/5 transition-colors group">
                <div class="flex items-start gap-3">
                    <div class="mt-1">
                        {% if task.status == 'To Do' %}
                        <i data-lucide="circle-dot" class="h-5 w-5 text-orange-500"></i>
                        {% elif task.status == 'In Progress' %}
                        <i data-lucide="clock" class="h-5 w-5 text-blue-500"></i>
                        {% else %}
                        <i data-lucide="check-circle-2" class="h-5 w-5 text-purple-500"></i>
                        {% endif %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div
                            class="flex flex-col lg:flex-row lg:items-center justify-between mb-2 lg:mb-1 gap-2 lg:gap-4">
                            <div class="flex items-center gap-2 min-w-0">
                                <a href="{{ url_for('tasks.view_task', repo_owner=repo_owner, repo_name=repo_name, task_id=task.id) }}"
                                    class="text-base font-bold text-zinc-200 group-hover:text-blue-400 transition-colors truncate block">
                                    {{ task.title }}
                                </a>
                            </div>
                            <div class="flex flex-wrap gap-1 lg:justify-end shrink-0">
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-white/10 text-white border border-white/20">
                                    Type: {{ task.task_type }}
                                </span>
                                {% if task.priority == 'HIGH' %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-red-500/20 text-red-400">Priority:
                                    High</span>
                                {% elif task.priority == 'MED' %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-yellow-500/20 text-yellow-400">Priority:
                                    Med</span>
                                {% else %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-green-500/20 text-green-400">Priority:
                                    Low</span>
                                {% endif %}

                                {% if task.complexity == 'HIGH' %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-red-500/20 text-red-400">Complexity:
                                    High</span>
                                {% elif task.complexity == 'MED' %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-yellow-500/20 text-yellow-400">Complexity:
                                    Med</span>
                                {% else %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-green-500/20 text-green-400">Complexity:
                                    Low</span>
                                {% endif %}

                                {% if task.due_date %}
                                <span
                                    class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-500/20 text-blue-400 border border-blue-500/40">
                                    <i data-lucide="calendar" class="h-3 w-3 inline mr-1"></i>{{ task.due_date }}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="text-xs text-zinc-500 flex items-center justify-between mt-2">
                            <div class="flex items-center gap-2">
                                <span>#{{ task.id }} created {{ task.created_at | timesince }} by </span>
                                <span class="flex items-center gap-1 mx-1">
                                    {% if task.author_avatar %}
                                    <img src="{{ url_for('static', filename=task.author_avatar) }}"
                                        class="w-4 h-4 rounded-full object-cover">
                                    {% else %}
                                    <div
                                        class="w-4 h-4 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-[6px] font-bold text-white uppercase">
                                        {{ task.author_name[:2] }}
                                    </div>
                                    {% endif %}
                                    <span
                                        class="text-zinc-400 font-medium hover:text-white transition-colors cursor-pointer">
                                        {{ task.author_name }}
                                    </span>
                                </span>
                            </div>
                            {% if task.assignees %}
                            <div class="flex items-center gap-1 -space-x-2">
                                {% for assignee in task.assignees %}
                                {% if assignee.profile_picture %}
                                <img src="{{ url_for('static', filename=assignee.profile_picture) }}"
                                    class="w-6 h-6 rounded-full border border-black z-10"
                                    title="{{ assignee.username }}">
                                {% else %}
                                <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-[8px] font-bold text-white border border-black z-10"
                                    title="{{ assignee.username }}">
                                    {{ assignee.username[:2] }}
                                </div>
                                {% endif %}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="check-square" class="h-8 w-8 text-zinc-600"></i>
            </div>
            <h3 class="text-lg font-bold text-zinc-300">No tasks found</h3>
            <p class="text-zinc-500 text-sm mt-1 max-w-sm">
                {% if search_query %}
                No tasks match your search "{{ search_query }}" for the selected status.
                {% else %}
                There are no tasks matching the selected status.
                {% endif %}
            </p>
            {% if repo.can_write %}
            <button onclick="openModalAnimation(document.getElementById('new-task-modal'))"
                class="mt-6 glass-button-primary px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
                Create Task
            </button>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% include 'repository_modals/new_task_modal.html' %}
{% endblock %}