{% extends 'base.html' %}
{% block title %}Skills Marketplace — 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">Skills Marketplace</h1>
        <p style="color:rgba(255,255,255,0.6)">Find the talent your project needs</p>
      </div>
      {% if user.is_authenticated %}
      <a href="{% url 'skills: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>
        List Your Skill
      </a>
      {% endif %}
    </div>

    <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 skills...">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
      </div>
      <select name="category" class="form-select" style="width:auto">
        <option value="">All Categories</option>
        {% for val, label in categories %}
        <option value="{{ val }}" {% if selected_category == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
      <select name="experience" class="form-select" style="width:auto">
        <option value="">Any Level</option>
        <option value="beginner" {% if request.GET.experience == 'beginner' %}selected{% endif %}>Beginner</option>
        <option value="intermediate" {% if request.GET.experience == 'intermediate' %}selected{% endif %}>Intermediate</option>
        <option value="advanced" {% if request.GET.experience == 'advanced' %}selected{% endif %}>Advanced</option>
        <option value="expert" {% if request.GET.experience == 'expert' %}selected{% endif %}>Expert</option>
      </select>
    </form>
  </div>
</div>

<div class="page-content" style="padding-top:2rem">
<div class="container">
  <div class="grid-3 stagger">
    {% for listing in listings %}
    <a href="{{ listing.get_absolute_url }}" style="text-decoration:none">
      <div class="card card-hover">
        <!-- Header -->
        <div style="display:flex;align-items:center;gap:0.875rem;margin-bottom:1rem">
          {% if listing.user.profile.photo %}
            <img src="{{ listing.user.profile.photo.url }}" class="avatar avatar-md" alt="">
          {% else %}
            <div class="avatar avatar-md avatar-placeholder" style="font-size:13px;flex-shrink:0">
              {{ listing.user.first_name|first|upper }}{{ listing.user.last_name|first|upper }}
            </div>
          {% endif %}
          <div style="flex:1;min-width:0">
            <div style="font-weight:700;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ listing.user.get_full_name }}</div>
            <div style="font-size:0.72rem;color:var(--text-muted)">{{ listing.user.university|default:"Student" }}</div>
          </div>
          <span class="badge badge-{% if listing.experience_level == 'expert' %}secondary{% elif listing.experience_level == 'advanced' %}primary{% else %}teal{% endif %}">
            {{ listing.get_experience_level_display }}
          </span>
        </div>

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

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

        <div style="display:flex;align-items:center;justify-content:space-between;padding-top:0.875rem;border-top:1px solid var(--border)">
          <span class="badge badge-gray">{{ listing.get_category_display }}</span>
          <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:var(--text-muted)">
            <span>👁 {{ listing.views_count }}</span>
            {% if listing.is_available %}
            <span style="color:var(--success);font-weight:600">● Available</span>
            {% else %}
            <span style="color:var(--text-muted)">Unavailable</span>
            {% endif %}
          </div>
        </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 skills listed yet</h3>
      <p class="empty-state-text">Be the first to share your skill!</p>
      <a href="{% url 'skills:create' %}" class="btn btn-primary">List a Skill</a>
    </div>
    {% endfor %}
  </div>

  {% 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 %}