{% extends 'base.html' %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-5">
      <h2 class="brand-font fw-bold mb-0">Meus Mockups</h2>
      <a href="{% url 'create_mockup' %}" class="btn btn-fashion">Novo Projeto</a>
    </div>
    
    {% if projects %}
    <div class="row g-4">
      {% for project in projects %}
      <div class="col-md-4 col-lg-3">
        <div class="glass-card h-100 rounded-0 overflow-hidden">
          <div class="position-relative" style="padding-top: 125%; overflow: hidden;">
            <img src="{{ project.main_image.url }}" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="{{ project.title }}">
            <div class="position-absolute top-0 end-0 m-2">
              <span class="badge {% if project.status == 'pending' %}bg-warning{% elif project.status == 'completed' %}bg-success{% else %}bg-secondary{% endif %} rounded-0">
                {{ project.status|capfirst }}
              </span>
            </div>
          </div>
          <div class="p-3">
            <h5 class="fw-bold text-truncate mb-1">{{ project.title }}</h5>
            <p class="text-muted small mb-3">{{ project.created_at|date:"d/m/Y H:i" }}</p>
            <a href="{% url 'project_detail' project.pk %}" class="btn btn-outline-dark btn-sm w-100 rounded-0">Ver Detalhes</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5 glass-card">
      <div class="py-5">
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-images text-muted mb-4" viewBox="0 0 16 16">
          <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
          <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2.002 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM14 2a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .706 0L14 9.293V2z"/>
        </svg>
        <h3 class="fw-bold">Nenhum projeto ainda</h3>
        <p class="text-muted mb-4">Comece enviando sua primeira peça de roupa.</p>
        <a href="{% url 'create_mockup' %}" class="btn btn-fashion btn-lg">CRIAR MEU PRIMEIRO MOCKUP</a>
      </div>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}
