{% comment %}
Reusable sidebar project tree item. Expects `project` in context.
Shows the project name with expandable sub-links (Overview, Code, Timeline, etc.).
{% endcomment %}
<div x-data="{ open: '{{ project.slug }}' === '{% if request.resolver_match.kwargs.slug %}{{ request.resolver_match.kwargs.slug }}{% endif %}' }">
  <button @click="open = !open"
          class="flex items-center justify-between w-full rounded-md px-2 py-1.5 text-sm {% if project.slug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
    <span class="truncate">{{ project.name }}</span>
    <svg class="h-3 w-3 flex-shrink-0 transition-transform" :class="open && 'rotate-90'" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
  </button>
  <div x-show="open" x-collapse class="ml-3 mt-0.5 space-y-0.5 border-l border-gray-700/50 pl-2">
    <a href="{% url 'projects:detail' slug=project.slug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-500 hover:text-gray-300">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
      Overview
    </a>
    {% with pslug=project.slug %}
    <a href="{% url 'fossil:code' slug=pslug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs {% if '/fossil/code' in request.path and pslug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>
      Code
    </a>
    <a href="{% url 'fossil:timeline' slug=pslug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs {% if '/fossil/timeline' in request.path and pslug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
      Timeline
    </a>
    <a href="{% url 'fossil:tickets' slug=pslug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs {% if '/fossil/tickets' in request.path and pslug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z" /></svg>
      Tickets
    </a>
    <a href="{% url 'fossil:wiki' slug=pslug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs {% if '/fossil/wiki' in request.path and pslug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
      Wiki
    </a>
    <a href="{% url 'fossil:forum' slug=pslug %}" class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs {% if '/fossil/forum' in request.path and pslug in request.path %}text-brand-light font-medium{% else %}text-gray-500 hover:text-gray-300{% endif %}">
      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
      Forum
    </a>
    {% endwith %}
  </div>
</div>