{% extends 'base.html' %}
{% load static %}

{% block title %}My Projects - Packs Site{% endblock %}

{% block content %}
<div class="myprojects-header">
    <h1><i class="fas fa-folder-open"></i> My Projects</h1>
    <a href="{% url 'library:project_create_new' %}" class="btn btn-primary"><i class="fas fa-plus"></i> New Project</a>
</div>

<div class="myprojects-layout">
    <section class="myprojects-col">
        <h2><i class="fas fa-box-open"></i> Projects</h2>
        <div class="pack-grid">
            {% for project in projects %}
                {% include 'library/_project_card.html' %}
            {% empty %}
                <p class="empty-hint">You haven't created any projects yet.</p>
            {% endfor %}
        </div>
    </section>

    <div class="myprojects-divider" role="separator"></div>

    <section class="myprojects-col">
        <h2><i class="fas fa-pen-nib"></i> Drafts</h2>
        <div class="draft-list">
            {% for draft in drafts %}
                <div class="draft-card">
                    <a href="{% url 'library:project_create' draft.uuid %}" class="draft-title">{{ draft.title }}</a>
                    <span class="draft-meta">Edited {{ draft.updated_at|timesince }} ago</span>
                    <div class="draft-actions">
                        <a href="{% url 'library:project_create' draft.uuid %}" class="btn btn-secondary btn-sm"><i class="fas fa-pen"></i> Continue</a>
                        <form method="post" action="{% url 'library:project_draft_delete' draft.uuid %}" class="inline" onsubmit="return confirm('Delete this draft and its uploads?');">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-secondary btn-sm" title="Delete draft"><i class="fas fa-trash"></i></button>
                        </form>
                    </div>
                </div>
            {% empty %}
                <p class="empty-hint">No drafts yet — start one with the "+ New Project" button.</p>
            {% endfor %}
        </div>
    </section>
</div>
{% endblock %}