{% extends "base.html" %}

{% block content %}
<section class="container py-5">
  <div class="row mb-5">
    <div class="col-md-8">
      <h2 class="text-white mb-3">Find Your Next <span class="text-gradient">Co-Founder</span></h2>
      <p class="text-secondary mb-0">Discover and connect with talented student and graduate founders looking for partners.</p>
    </div>
    <div class="col-md-4 text-md-end align-self-end">
      <a href="{% url 'partner_matching' %}" class="btn btn-outline-light rounded-pill px-4 py-2 mt-4 mt-md-0"><i class="bi bi-arrow-repeat me-2"></i>Retake Quiz</a>
    </div>
  </div>
  
  <div class="row g-4">
    {% for partner in partners %}
      <div class="col-md-6 col-lg-4">
        <div class="glass-card h-100 p-0 overflow-hidden d-flex flex-column">
          <div class="p-4 flex-grow-1">
            <div class="d-flex align-items-center mb-4">
              <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center border border-secondary shadow-sm" style="width: 60px; height: 60px;">
                <i class="bi bi-person-fill fs-2 text-gradient"></i>
              </div>
              <div class="ms-3">
                <h5 class="text-white mb-0 fw-bold">{{ partner.user.username }}</h5>
                <span class="text-secondary small fw-bold">{{ partner.university }} · '{{ partner.graduation_year }}</span>
              </div>
            </div>
            
            <p class="text-secondary small mb-4 lh-lg">{{ partner.bio|default:"No bio available yet. I'm excited to build something new!" }}</p>
            
            <div class="mb-4">
              <h6 class="text-white small fw-bold mb-3">Primary Focus</h6>
              <div class="d-flex flex-wrap gap-2">
                <span class="badge bg-dark border border-secondary text-secondary rounded-pill px-3 py-2 fw-medium">Fintech</span>
                <span class="badge bg-dark border border-secondary text-secondary rounded-pill px-3 py-2 fw-medium">Tech</span>
              </div>
            </div>
            
            <div class="d-grid mt-4">
              <a href="{% url 'chat_detail' partner.pk %}" class="btn btn-primary rounded-pill py-2 fw-bold shadow-sm">
                <i class="bi bi-chat-dots-fill me-2"></i>Message & Connect
              </a>
            </div>
          </div>
        </div>
      </div>
    {% empty %}
      <div class="col-12 text-center py-5">
        <div class="glass-card py-5 shadow-lg border-0">
          <div class="mb-4">
            <i class="bi bi-person-plus-fill fs-1 text-secondary opacity-50"></i>
          </div>
          <h4 class="text-white mb-2">No partners found yet</h4>
          <p class="text-secondary small max-w-400 mx-auto">Be the first to create your founder profile and find your perfect co-founder.</p>
          <a href="{% url 'partner_matching' %}" class="btn btn-primary mt-3 rounded-pill px-5">Create Profile</a>
        </div>
      </div>
    {% endfor %}
  </div>
</section>
{% endblock %}