{% extends "base.html" %}

{% block title %}Starred Repositories - Open Git{% endblock %}

{% block main_content %}
<div class="page-header-glass flex-shrink-0">
    <div class="flex items-center">
        <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
            <i data-lucide="star" class="h-6 w-6 text-blue-400"></i>
        </div>
        <h2 class="text-3xl font-bold text-white">Starred</h2>
    </div>
    <p class="mt-2 text-zinc-500 text-sm ml-14">Your collection of favorite repositories.</p>
</div>

{# Search Info Bar #}
<div id="search-info-bar"
    class="px-6 py-3 flex items-center justify-between border-b border-zinc-800/80 flex-shrink-0 text-sm {% if not search_query %}hidden{% endif %} bg-zinc-900">
    <span class="text-zinc-400">Search results for "<strong><span id="search-query-display" class="text-white">{{
                search_query }}</span></strong>"</span>
    <button id="clear-search-btn" class="text-zinc-400 hover:text-white font-semibold transition-colors">Clear</button>
</div>

<div id="repo-grid-area" class="flex-1 overflow-y-auto p-6 lg:p-8">
    <div class="grid grid-cols-1 gap-6">
        {% if not repos %}
        <div class="col-span-full text-center py-12 text-zinc-600 empty-folder-message">
            <i data-lucide="star" class="h-16 w-16 mx-auto"></i>
            <p class="mt-4 text-lg">No starred repositories found</p>
            <p class="text-sm">Star a repository to see it here.</p>
        </div>
        {% else %}
        {% for repo in repos %}
        <a href="{{ url_for('git.view_repository', repo_owner=repo.owner, repo_name=repo.name) }}"
            class="repo-card glass-panel block p-6 rounded-3xl border border-white/5 text-left transition-colors hover:bg-white/5 relative group overflow-hidden cursor-pointer">
            <div
                class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 blur-3xl -z-10 group-hover:bg-blue-500/10 transition-all">
            </div>
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white group-hover:text-blue-400 transition-colors truncate">{{
                    repo.name }}</h3>
                <span
                    class="text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full border {{ 'border-emerald-500/30 text-emerald-400 bg-emerald-500/5 shadow-[0_0_10px_rgba(16,185,129,0.1)]' if repo.visibility == 'public' else 'border-red-500/30 text-red-400 bg-red-500/5 shadow-[0_0_10px_rgba(239,68,68,0.1)]' }}">
                    {{ repo.visibility }}
                </span>
            </div>
            <p class="mt-1 text-sm text-zinc-400">by {{ repo.owner }}</p>
            <p class="mt-3 text-zinc-300 text-sm line-clamp-2">{{ ((repo.description or '')[:100] + ('…' if (repo.description or '')|length > 100 else '')) or 'No description provided.' }}</p>
            <div class="mt-4 flex items-center space-x-4 text-sm text-zinc-500">
                <div class="flex items-center">
                    <i data-lucide="code" class="h-4 w-4 mr-1.5"></i>
                    <span>{{ repo.language or '---' }}</span>
                </div>
                <div class="flex items-center">
                    <i data-lucide="star" class="h-4 w-4 mr-1.5"></i>
                    <span>{{ repo.stars or 0 }}</span>
                </div>
                <div class="flex items-center">
                    <i data-lucide="git-branch" class="h-4 w-4 mr-1.5"></i>
                    <span>{{ repo.branches_count or 0 }}</span>
                </div>
                <div class="flex items-center">
                    <i data-lucide="git-commit" class="h-4 w-4 mr-1.5"></i>
                    <span>{{ repo.commit_count or 0 }}</span>
                </div>
            </div>
        </a>
        {% endfor %}
        {% endif %}
    </div>
</div>
<div id="no-results" class="text-center py-12 text-zinc-600" style="display: none;">
    <i data-lucide="search-x" class="h-16 w-16 mx-auto"></i>
    <p class="mt-4 text-lg">No matching repositories found</p>
</div>

{# Pagination Controls #}
{% from "pagination_controls.html" import render_pagination %}
{{ render_pagination(current_page, total_pages, limit, 'git.starred_repositories', {'search': search_query} if
search_query else {}, total_count=total_count, item_noun='repositories') }}

</div>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        // Search initialization copied from previous templates
        const search_query = "{{ search_query or '' }}";
        if (search_query) {
            document.getElementById('search-input').value = search_query;
            const searchInfoBar = document.getElementById('search-info-bar');
            if (searchInfoBar) {
                document.getElementById('search-query-display').textContent = search_query;
                searchInfoBar.classList.remove('hidden');
            }
            document.getElementById('clear-search-btn').addEventListener('click', () => {
                const newUrl = new URL(window.location.href);
                newUrl.searchParams.delete('search');
                if (typeof loadPage === 'function') loadPage(newUrl.toString());
                else window.location.href = newUrl.toString();
            });
            if (document.querySelectorAll('.repo-card').length === 0) {
                document.getElementById('no-results').style.display = 'block';
                const emptyFolderMessage = document.querySelector('.empty-folder-message');
                if (emptyFolderMessage) { emptyFolderMessage.style.display = 'none'; }
            }
        }
    })();
</script>
{% endblock %}