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

{% block title %}Issues - {{ 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">Issues</h1>
            <span class="text-zinc-500 text-sm font-medium px-2 py-0.5 rounded-full bg-white/5 border border-white/5">{{
                issues|length }}</span>
        </div>

        {% if session.get('user_id') %}
        <button onclick="openModalAnimation(document.getElementById('new-issue-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 Issue
        </button>
        {% endif %}
    </div>

    <!-- Search/Filter Bar -->
    <div class="flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
        <div class="flex-1 relative">
            <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" placeholder="Search issues..."
                class="w-full bg-transparent border-none text-sm text-zinc-200 placeholder-zinc-500 pl-10 py-2 focus:ring-0 outline-none">
        </div>
        <div class="flex items-center border-l border-white/5 pl-2">
            <a href="?status=open"
                class="px-3 py-1.5 text-xs font-bold {% if not current_status or current_status == 'open' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg mr-1 transition-colors">
                Open <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ open_count }}</span>
            </a>
            <a href="?status=closed"
                class="px-3 py-1.5 text-xs font-bold {% if current_status == 'closed' %}text-white bg-white/10{% else %}text-zinc-400 hover:text-white{% endif %} rounded-lg transition-colors">
                Closed <span class="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-black/40">{{ closed_count }}</span>
            </a>
        </div>
    </div>

    <!-- Issues List -->
    <div class="rounded-xl border border-white/5 bg-black/20 overflow-hidden min-h-[400px]">
        {% if issues %}
        <div class="divide-y divide-white/5">
            {% for issue in issues %}
            <div class="p-4 hover:bg-white/5 transition-colors group">
                <div class="flex items-start gap-3">
                    <div class="mt-1">
                        {% if issue.status == 'open' %}
                        <i data-lucide="circle-dot" class="h-5 w-5 text-zinc-400"></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 items-center justify-between mb-1">
                            <div class="flex items-center gap-2 flex-wrap min-w-0">
                                <a href="{{ url_for('issues.view_issue', repo_owner=repo_owner, repo_name=repo_name, issue_id=issue.id) }}"
                                    class="text-base font-bold text-zinc-200 group-hover:text-blue-400 transition-colors truncate block">
                                    {{ issue.title }}
                                </a>
                                {% if issue.labels %}
                                <div class="flex flex-wrap gap-1">
                                    {% for label in issue.labels %}
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-medium"
                                        style="background-color: {{ label.color }}20; color: {{ label.color }}; border: 1px solid {{ label.color }}40;">
                                        {{ label.name }}
                                    </span>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            {% if issue.comment_count > 0 %}
                            <div class="flex items-center flex-shrink-0 text-zinc-500 text-xs gap-1 ml-4">
                                <i data-lucide="message-square" class="h-3 w-3"></i> {{ issue.comment_count }}
                            </div>
                            {% endif %}
                        </div>
                        <div class="text-xs text-zinc-500 flex items-center gap-2">
                            <span>#{{ issue.id }} opened {{ issue.created_at | timesince }} by </span>
                            <span class="flex items-center gap-1 mx-1">
                                {% if issue.author_avatar %}
                                <img src="{{ url_for('static', filename=issue.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">
                                    {{ issue.author_name[:2] }}
                                </div>
                                {% endif %}
                                <span
                                    class="text-zinc-400 font-medium hover:text-white transition-colors cursor-pointer">{{
                                    issue.author_name }}</span>
                            </span>
                        </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="circle-dot" class="h-8 w-8 text-zinc-600"></i>
            </div>
            <h3 class="text-lg font-bold text-zinc-300">No issues found</h3>
            <p class="text-zinc-500 text-sm mt-1 max-w-sm">Be the first to create an issue for this repository.</p>
            {% if session.get('user_id') %}
            <button onclick="openModalAnimation(document.getElementById('new-issue-modal'))"
                class="mt-6 glass-button-primary px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
                Create Issue
            </button>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% include 'repository_modals/new_issue_modal.html' %}
{% endblock %}