{% 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">Discover Peer-Led <span class="text-gradient">Startups</span></h2>
      <p class="text-secondary mb-0">Browse through the latest student and graduate startups looking for investment and partners.</p>
    </div>
    <div class="col-md-4 text-md-end align-self-end">
      <a href="#" class="btn btn-outline-light rounded-pill px-4 py-2 mt-4 mt-md-0"><i class="fa-solid fa-plus me-2"></i>Post Startup</a>
    </div>
  </div>
  
  <div class="row g-4">
    {% for startup in startups %}
      <div class="col-md-6 col-lg-4">
        <div class="glass-card h-100 p-0 overflow-hidden">
          <div class="p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
              <span class="badge bg-dark border border-secondary text-secondary rounded-pill px-3 py-2 fw-medium">Fintech</span>
              <span class="text-white small fw-bold"><i class="fa-solid fa-hourglass-start me-1 text-primary"></i> 12 days left</span>
            </div>
            <h4 class="text-white mb-2">{{ startup.name }}</h4>
            <p class="text-secondary small mb-4">{{ startup.headline }}</p>
            
            <div class="mb-4">
              <div class="d-flex justify-content-between mb-2">
                <span class="text-white small fw-bold">£{{ startup.raised_amount|floatformat:0 }} raised</span>
                <span class="text-secondary small">{{ startup.raised_amount|divisibleby:startup.target_amount|default:0 }}% of £{{ startup.target_amount|floatformat:0 }}</span>
              </div>
              <div class="progress bg-dark" style="height: 6px;">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            
            <div class="d-grid">
              <a href="{% url 'startup_detail' startup.pk %}" class="btn btn-primary rounded-pill">View Details</a>
            </div>
          </div>
        </div>
      </div>
    {% empty %}
      <div class="col-12 text-center py-5">
        <div class="glass-card py-5">
          <div class="mb-4">
            <i class="fa-solid fa-magnifying-glass fa-3x text-secondary"></i>
          </div>
          <h4 class="text-white mb-2">No startups found yet</h4>
          <p class="text-secondary small">Be the first to post your vision and start raising capital from your peers.</p>
          <a href="#" class="btn btn-primary mt-3">Post Your Startup</a>
        </div>
      </div>
    {% endfor %}
  </div>
</section>
{% endblock %}