{% extends "base.html" %}

{% block content %}
<section class="container py-5">
  <div class="row mb-5 align-items-end">
    <div class="col-md-8">
      <h2 class="text-white mb-3">Your <span class="text-gradient">Portfolio</span></h2>
      <p class="text-secondary mb-0">Manage your investments and track your startup's progress.</p>
    </div>
    <div class="col-md-4 text-md-end">
      <div class="glass-card py-3 px-4 d-inline-block border border-secondary shadow-lg">
        <span class="text-white small fw-bold me-2 opacity-75">Total Invested:</span>
        <span class="text-gradient h4 mb-0 fw-bold">£{{ total_invested|floatformat:0 }}</span>
      </div>
    </div>
  </div>
  
  <div class="row g-5">
    <!-- Investments Section -->
    <div class="col-lg-12">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="text-white fw-bold mb-0">My Investments</h4>
        <a href="{% url 'discover' %}" class="btn btn-link text-primary text-decoration-none small fw-bold">
            <i class="bi bi-plus-lg me-1"></i>New Investment
        </a>
      </div>
      
      {% for investment in investments %}
        <div class="glass-card mb-3 p-3 hover-lift border-0 shadow-sm">
          <div class="row align-items-center">
            <div class="col-md-4">
              <h5 class="text-white mb-1 fw-bold">{{ investment.startup.name }}</h5>
              <span class="text-secondary small fw-medium opacity-75">{{ investment.timestamp|date:"d M Y" }}</span>
            </div>
            <div class="col-md-3">
              <span class="text-white fw-bold">£{{ investment.amount|floatformat:0 }}</span>
              <div class="text-secondary small opacity-75">Invested</div>
            </div>
            <div class="col-md-3">
              <span class="text-white fw-bold">£{{ investment.startup.raised_amount|floatformat:0 }}</span>
              <div class="text-secondary small opacity-75">Total Raised</div>
            </div>
            <div class="col-md-2 text-md-end mt-3 mt-md-0">
              <a href="{% url 'startup_detail' investment.startup.pk %}" class="btn btn-outline-light btn-sm rounded-pill px-4 py-2 border-secondary">View Detail</a>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="glass-card py-5 text-center border-0 shadow-sm">
          <div class="mb-3">
            <i class="bi bi-wallet2 fs-2 text-secondary opacity-50"></i>
          </div>
          <p class="text-secondary small">No investments found yet. Browse startups and start supporting your peers.</p>
          <a href="{% url 'discover' %}" class="btn btn-primary rounded-pill mt-3 px-4 fw-bold">Explore Startups</a>
        </div>
      {% endfor %}
    </div>
    
    <!-- My Startups Section -->
    <div class="col-lg-12">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="text-white fw-bold mb-0">My Startups</h4>
        {% if user.profile.role == 'FOUNDER' %}
        <a href="{% url 'post_startup' %}" class="btn btn-link text-primary text-decoration-none small fw-bold">
            <i class="bi bi-plus-lg me-1"></i>Post New Startup
        </a>
        {% endif %}
      </div>
      
      {% for startup in my_startups %}
        <div class="glass-card mb-3 p-4 hover-lift border-0 shadow-sm">
          <div class="row align-items-center">
            <div class="col-md-4">
              <h5 class="text-white mb-1 fw-bold">{{ startup.name }}</h5>
              <span class="badge bg-dark-subtle border border-secondary text-secondary rounded-pill px-3 py-1 fw-medium">{{ startup.status }}</span>
            </div>
            <div class="col-md-3">
              <span class="text-white fw-bold">£{{ startup.raised_amount|floatformat:0 }}</span>
              <div class="text-secondary small opacity-75">Raised</div>
            </div>
            <div class="col-md-3">
              <span class="text-white fw-bold">£{{ startup.target_amount|floatformat:0 }}</span>
              <div class="text-secondary small opacity-75">Target</div>
            </div>
            <div class="col-md-2 text-md-end mt-3 mt-md-0">
              <a href="{% url 'startup_detail' startup.pk %}" class="btn btn-outline-light btn-sm rounded-pill px-4 py-2 border-secondary">Manage</a>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="glass-card py-5 text-center border-0 shadow-sm">
          <div class="mb-3">
            <i class="bi bi-rocket-takeoff fs-2 text-secondary opacity-50"></i>
          </div>
          <p class="text-secondary small">You haven't posted any startups yet. Ready to build the future?</p>
          <a href="{% url 'post_startup' %}" class="btn btn-primary rounded-pill mt-3 px-4 fw-bold">Post Your Startup</a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}