<!-- Portfolio List -->
<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                <i class="fas fa-briefcase mr-2"></i>
                Управление портфолио
            </h3>
            <a href="/admin/portfolio/add" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                <i class="fas fa-plus mr-1"></i>
                Добавить проект
            </a>
        </div>
    </div>
    
    <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <ul role="list" class="divide-y divide-gray-200">
            <% if (portfolio && portfolio.length > 0) { %>
                <% portfolio.forEach(item => { %>
                    <li>
                        <div class="px-4 py-4 flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <% if (item.images && item.images.length > 0) { %>
                                        <img class="h-10 w-10 rounded-full object-cover" src="<%= item.images[0].url %>" alt="">
                                    <% } else { %>
                                        <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                            <i class="fas fa-image text-gray-500"></i>
                                        </div>
                                    <% } %>
                                </div>
                                <div class="ml-4">
                                    <div class="flex items-center">
                                        <div class="text-sm font-medium text-gray-900"><%= item.title %></div>
                                        <% if (item.featured) { %>
                                            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-star mr-1"></i>
                                                Рекомендуемое
                                            </span>
                                        <% } %>
                                        <% if (!item.isPublished) { %>
                                            <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                Черновик
                                            </span>
                                        <% } %>
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        <%= item.category %> • 
                                        <%= new Date(item.createdAt).toLocaleDateString('ru-RU') %>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <a href="/portfolio/<%= item.id %>" target="_blank" class="text-blue-600 hover:text-blue-900">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                                <a href="/admin/portfolio/edit/<%= item.id %>" class="text-indigo-600 hover:text-indigo-900">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button onclick="deletePortfolio('<%= item.id %>')" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </li>
                <% }) %>
            <% } else { %>
                <li>
                    <div class="px-4 py-8 text-center">
                        <i class="fas fa-briefcase text-4xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">Проекты не найдены</p>
                        <a href="/admin/portfolio/add" class="mt-2 inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                            Добавить первый проект
                        </a>
                    </div>
                </li>
            <% } %>
        </ul>
    </div>
    
    <!-- Pagination -->
    <% if (pagination && pagination.total > 1) { %>
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                <% if (pagination.hasPrev) { %>
                    <a href="?page=<%= pagination.current - 1 %>" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Предыдущая
                    </a>
                <% } %>
                <% if (pagination.hasNext) { %>
                    <a href="?page=<%= pagination.current + 1 %>" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Следующая
                    </a>
                <% } %>
            </div>
        </div>
    <% } %>
</div>

<script>
function deletePortfolio(id) {
    if (confirm('Вы уверены, что хотите удалить этот проект?')) {
        fetch(`/api/admin/portfolio/${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Ошибка при удалении проекта');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка при удалении проекта');
        });
    }
}
</script>