{% extends 'base.html' %}
{% block title %}Projects — CampusTalent{% endblock %}

{% block content %}
<div class="page-hero" style="padding:3rem 0 2.5rem">
  <div class="container" style="position:relative;z-index:2">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem">
      <div>
        <h1 style="color:white;margin-bottom:0.375rem">Projects</h1>
        <p style="color:rgba(255,255,255,0.6)">Find projects to join or share yours with the community</p>
      </div>
      {% if user.is_authenticated %}
      <a href="{% url 'projects:create' %}" class="btn-hero-primary" style="font-size:0.9rem;padding:0.75rem 1.5rem">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Post a Project
      </a>
      {% endif %}
    </div>

    <!-- Filter bar -->
    <form method="get" style="display:flex;gap:0.75rem;margin-top:1.5rem;flex-wrap:wrap">
      <div class="search-main" style="flex:1;min-width:260px;padding:0.75rem 1rem">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" name="q" value="{{ search_q }}" placeholder="Search projects...">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
      </div>
      <select name="type" class="form-select" style="width:auto">
        <option value="">All Types</option>
        {% for val, label in project_types %}
        <option value="{{ val }}" {% if request.GET.type == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

<div class="page-content" style="padding-top:2rem">
<div class="container">
  <div class="grid-3 stagger">
    {% for project in projects %}
    <a href="{{ project.get_absolute_url }}" style="text-decoration:none">
      <div class="card card-hover card-accent">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem">
          <span class="badge badge-{% if project.project_type == 'startup' %}secondary{% elif project.project_type == 'research' %}teal{% elif project.project_type == 'hackathon' %}amber{% else %}primary{% endif %}">
            {{ project.get_project_type_display }}
          </span>
          <div style="text-align:right">
            <span class="badge badge-{% if project.status == 'open' %}success{% else %}gray{% endif %}">{{ project.get_status_display }}</span>
            <div style="font-size:0.72rem;color:var(--text-muted);margin-top:2px">{{ project.open_slots }} slot{{ project.open_slots|pluralize }} left</div>
          </div>
        </div>

        <h3 style="font-size:1.05rem;margin-bottom:0.625rem">{{ project.title }}</h3>
        <p style="font-size:0.83rem;color:var(--text-muted);margin-bottom:1rem;line-height:1.6">{{ project.description|truncatechars:120 }}</p>

        {% if project.required_skills.exists %}
        <div class="tags" style="margin-bottom:1rem">
          {% for skill in project.required_skills.all|slice:":4" %}
          <span class="tag tag-secondary">{{ skill }}</span>
          {% endfor %}
        </div>
        {% endif %}

        <div style="display:flex;align-items:center;gap:0.625rem;padding-top:0.875rem;border-top:1px solid var(--border)">
          <div class="avatar avatar-sm avatar-placeholder" style="font-size:10px;flex-shrink:0">
            {{ project.owner.first_name|first|upper }}
          </div>
          <div style="flex:1;min-width:0">
            <div style="font-size:0.78rem;font-weight:600;color:var(--text-primary)">{{ project.owner.get_full_name }}</div>
            <div style="font-size:0.7rem;color:var(--text-muted)">{{ project.owner.university|default:"Student" }}</div>
          </div>
          {% if project.timeline %}
          <span style="font-size:0.72rem;color:var(--text-muted);white-space:nowrap">🕐 {{ project.timeline }}</span>
          {% endif %}
        </div>
      </div>
    </a>
    {% empty %}
    <div class="empty-state" style="grid-column:1/-1">
      <div class="empty-state-icon">🚀</div>
      <h3 class="empty-state-title">No projects found</h3>
      <p class="empty-state-text">Be the first to post a project!</p>
      <a href="{% url 'projects:create' %}" class="btn btn-primary">Post a Project</a>
    </div>
    {% endfor %}
  </div>

  <!-- Pagination -->
  {% if is_paginated %}
  <div class="pagination">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}" class="page-link">←</a>
    {% endif %}
    {% for num in page_obj.paginator.page_range %}
    <a href="?page={{ num }}" class="page-link {% if page_obj.number == num %}active{% endif %}">{{ num }}</a>
    {% endfor %}
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}" class="page-link">→</a>
    {% endif %}
  </div>
  {% endif %}
</div>
</div>
{% endblock %}