<!-- Cabeçalho -->

<div class="text-center mb-8">

<h1 class="text-4xl font-bold text-primary mb-4">

{iniciativas?.projetosDePesquisa ?? "Projetos de Pesquisa"}

</h1>

<p class="text-lg text-base-content max-w-3xl mx-auto">

{iniciativas?.descricaoProjetosDePesquisa ?? "Projetos desenvolvidos por docentes e associados ao CPPS."}

</p>

</div>

<!-- Estatísticas -->

<div class="stats shadow w-full mb-8">

<div class="stat">

<div class="stat-title">Total de Projetos</div>

<div class="stat-value text-primary">{projetosOrdenados.length}</div>

</div>

<div class="stat">

<div class="stat-title">Ordenação Atual</div>

<div class="stat-value text-sm">

{ordem === 'titulo' ? 'Por Título' :

ordem === 'docente' ? 'Por Docente' :

'Por Período'}

</div>

</div>

</div>

<!-- Seletor de ordenação melhorado -->

<div class="flex flex-wrap gap-4 items-center justify-between mb-8 p-4 bg-base-200 rounded-lg">

<div class="flex items-center gap-2">

<span class="font-semibold text-base-content">

{iniciativas?.ordenarPor ?? "Ordenar por"}:

</span>

<div class="btn-group">

<button

class={`btn btn-sm ${ordem === 'titulo' ? 'btn-active btn-primary' : 'btn-outline'}`}

onclick="ordenarProjetos('titulo')"

>

{iniciativas?.porTitulo ?? "Título"}

</button>

<button

class={`btn btn-sm ${ordem === 'docente' ? 'btn-active btn-primary' : 'btn-outline'}`}

onclick="ordenarProjetos('docente')"

>

{iniciativas?.porDocente ?? "Docente"}

</button>

<button

class={`btn btn-sm ${ordem === 'periodo' ? 'btn-active btn-primary' : 'btn-outline'}`}

onclick="ordenarProjetos('periodo')"

>

{iniciativas?.porPeriodo ?? "Período"}

</button>

</div>

</div>

<!-- Filtro adicional -->

<div class="flex items-center gap-2">

<span class="font-semibold text-base-content">Filtrar:</span>

<select class="select select-bordered select-sm" id="filtro-agencia">

<option value="">Todas as Agências</option>

<option value="FAPESP">FAPESP</option>

<option value="CNPq">CNPq</option>

<option value="CAPES">CAPES</option>

</select>

</div>

</div>

<!-- Lista de projetos melhorada -->

<div id="lista-projetos" class="space-y-6">

{projetosOrdenados.map((proj, index) => (

<article class="card bg-base-100 shadow-lg border border-base-300 hover:shadow-xl transition-shadow duration-300" key={index}>

<div class="card-body">

<!-- Cabeçalho do projeto -->

<div class="flex flex-wrap items-start justify-between gap-4 mb-4">

<div class="flex-1">

<div class="flex items-center gap-2 mb-2">

<span class="badge badge-primary badge-sm">#{index + 1}</span>

<span class="badge badge-outline badge-sm">{proj.agencia}</span>

<span class="badge badge-ghost badge-sm">{proj.periodo}</span>

</div>

<h2 class="card-title text-xl text-primary mb-2">

{proj.titulo}

</h2>

<p class="text-base-content font-medium">

<span class="text-sm text-neutral-500">Docente responsável:</span> {proj.docente}

</p>

</div>

<button class="btn btn-circle btn-ghost btn-sm" onclick={`toggleDetails('projeto-${index}')`}>

<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>

</svg>

</button>

</div>

<!-- Resumo sempre visível -->

<div class="mb-4">

<h3 class="font-semibold text-base-content mb-2">Resumo:</h3>

<p class="text-sm text-base-content/80 line-clamp-3">

{proj.resumo}

</p>

</div>

<!-- Detalhes expansíveis -->

<div id={`projeto-${index}`} class="hidden space-y-4 pt-4 border-t border-base-300">

<div class="grid md:grid-cols-2 gap-4">

<div class="space-y-2">

<p><strong class="text-primary">Processo:</strong> {proj.processo}</p>

<p><strong class="text-primary">Natureza:</strong> {proj.natureza}</p>

<p><strong class="text-primary">Valor:</strong> {proj.valor}</p>

</div>

<div class="space-y-2">

<p><strong class="text-primary">Pesquisadores Associados:</strong> {proj.associados}</p>

</div>

{Array.isArray(proj.apoioCentro) && proj.apoioCentro.length > 0 && (

<div class="mt-4">

<h4 class="font-semibold text-primary mb-2">Apoios do CPPS:</h4>

<ul class="list-disc list-inside space-y-1 text-sm">

{proj.apoioCentro.map((item, i) => (

<li key={i} class="text-base-content/80">{item}</li>

))}

</ul>

</div>

)}

</div>

</article>

<!-- Mensagem quando não há projetos -->

{projetosOrdenados.length === 0 && (

<div class="text-center py-12">

<div class="text-6xl mb-4">📚</div>

<h3 class="text-xl font-semibold text-base-content mb-2">Nenhum projeto encontrado</h3>

<p class="text-base-content/60">Não há projetos disponíveis no momento.</p>

</div>

)}

<script type="application/json" id="projetos-data">

{JSON.stringify(projetosOrdenados)}

</script>

<script is:inline>

// Função para escapar HTML

function escapeHtml(text) {

if (!text) return '';

const div = document.createElement('div');

div.textContent = text;

return div.innerHTML;

}

// Função para alternar detalhes do projeto

function toggleDetails(elementId) {

const element = document.getElementById(elementId);

const button = element?.previousElementSibling?.querySelector('button[onclick*="toggleDetails"]');

if (element) {

element.classList.toggle('hidden');

if (button) {

const svg = button.querySelector('svg');

if (svg) {

svg.style.transform = element.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';

}

}

}

}

// Função para ordenar e recarregar a página

function ordenarProjetos(criterio) {

const url = new URL(window.location);

url.searchParams.set('ordem', criterio);

window.location.href = url.toString(); // 🔁 reload com o novo critério

}

// Função para atualizar visual dos botões (opcional, se quiser manter ativo visualmente)

function atualizarBotoes(criterioAtivo) {

document.querySelectorAll('.btn-group button').forEach(btn => {

const criterio = btn.getAttribute('onclick')?.match(/'([^']+)'/)?.[1];

if (criterio === criterioAtivo) {

btn.className = 'btn btn-sm btn-active btn-primary';

} else {

btn.className = 'btn btn-sm btn-outline';

}

});

}

// Inicialização: destaca o botão correto se houver parâmetro na URL

document.addEventListener('DOMContentLoaded', function() {

const urlParams = new URLSearchParams(window.location.search);

const ordemUrl = urlParams.get('ordem');

const ordemValida = ['titulo', 'docente', 'periodo'];

if (ordemUrl && ordemValida.includes(ordemUrl)) {

atualizarBotoes(ordemUrl);

}

});

// Tornar funções globais

window.toggleDetails = toggleDetails;

window.ordenarProjetos = ordenarProjetos;

</script>

<style>

.line-clamp-3 {

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

}

</style>