{% extends "base.html" %}

{% block content %}
<section class="container py-5">
  <div class="row g-5">
    <div class="col-lg-8">
      <div class="glass-card mb-5 p-5 border-0 shadow-lg">
        <div class="d-flex justify-content-between align-items-start mb-4">
          <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 opacity-75"><i class="bi bi-clock-history me-1 text-primary"></i> 12 days left</span>
        </div>
        <h1 class="text-white mb-3 fw-bold">{{ startup.name }}</h1>
        <p class="text-secondary lead mb-5 opacity-75">{{ startup.headline }}</p>
        
        <div class="mb-5">
          <h4 class="text-white mb-3 fw-bold">About the Project</h4>
          <p class="text-secondary opacity-75">{{ startup.description }}</p>
        </div>
        
        <div class="mb-5">
          <h4 class="text-white mb-3 fw-bold">The Vision</h4>
          <p class="text-secondary opacity-75">Gatsby is built by the community. This project aims to revolutionize its sector by leveraging the unique insights of university talent. Our goal is to scale beyond campus while maintaining our core community values.</p>
        </div>
        
        <div class="p-4 bg-dark-subtle rounded-4 border border-secondary border-opacity-25">
          <h5 class="text-white mb-3 fw-bold"><i class="bi bi-person-circle me-2 text-primary"></i>Founder</h5>
          <div class="d-flex align-items-center">
             <div class="rounded-circle bg-dark p-2 text-white fw-bold me-3 shadow-sm border border-secondary" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                {{ startup.founder.user.username|first|upper }}
            </div>
            <div>
                <p class="mb-0 text-white fw-bold">{{ startup.founder.user.username }}</p>
                <p class="mb-0 text-secondary small opacity-75">{{ startup.founder.university }} · Class of {{ startup.founder.graduation_year }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-lg-4">
      <div class="glass-card sticky-top shadow-lg border-0" style="top: 100px; z-index: 10;">
        <h4 class="text-white mb-4 fw-bold">Investment</h4>
        
        <div class="mb-5">
          <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">Target: £{{ startup.target_amount|floatformat:0 }}</span>
          </div>
          <div class="progress bg-dark" style="height: 10px; border-radius: 5px;">
            {% widthratio startup.raised_amount startup.target_amount 100 as percentage %}
            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ percentage }}%;" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
        
        <div class="d-flex flex-column gap-3 mb-5 p-3 bg-white bg-opacity-5 rounded-4 border border-secondary border-opacity-10">
          <div class="d-flex justify-content-between">
            <span class="text-secondary small opacity-75">Minimum</span>
            <span class="text-white small fw-bold">£50</span>
          </div>
          <div class="d-flex justify-content-between">
            <span class="text-secondary small opacity-75">Backers</span>
            <span class="text-white small fw-bold">{{ startup.investments.count }}</span>
          </div>
          <div class="d-flex justify-content-between">
            <span class="text-secondary small opacity-75">Valuation</span>
            <span class="text-white small fw-bold">£25k - £100k</span>
          </div>
        </div>
        
        <div class="d-grid gap-3">
          <a href="{% url 'invest' startup.pk %}" class="btn btn-primary btn-lg rounded-pill fw-bold py-3 shadow-sm">Invest Now</a>
          <a href="{% url 'chat_detail' startup.founder.pk %}" class="btn btn-outline-light rounded-pill fw-bold py-3 border-secondary">
            <i class="bi bi-chat-left-dots-fill me-2"></i>Contact Founder
          </a>
        </div>
        
        <div class="mt-4 text-center">
          <p class="text-secondary small mb-0 opacity-75">Join the network of alumni and students supporting this vision.</p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}