{% extends 'base.html' %}
{% block title %}My Plans — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <span class="section-kicker">{{ t.saved_plans_kicker }}</span>
        <h1>{{ t.saved_plans_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">
            {{ t.saved_plans_intro }}
        </p>

        {% if plans %}
        {% for plan in plans %}
        <div class="order-card">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px;">
                <div>
                    <strong>{{ plan.title }}</strong>
                    {% if plan.purchased_at %}<span class="status-badge status-delivered">{{ t.saved_plans_converted }}</span>{% endif %}
                    <p style="color: var(--muted); font-size: 0.85rem; margin-top: 4px;">{{ t.saved_plans_saved_on }} {{ plan.created_at|slice:":10" }}</p>
                    {% if plan.note %}<p style="font-size: 0.9rem; margin-top: 6px;">{{ plan.note }}</p>{% endif %}
                    <ul style="margin-top: 8px; padding-left: 18px; font-size: 0.9rem; color: var(--muted);">
                        {% for item in plan.items %}
                        <li>{{ item.quantity }} x {{ item.name }}</li>
                        {% endfor %}
                    </ul>
                </div>
                <div style="display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;">
                    <form method="post" action="{% url 'market:plan_convert_to_cart' plan.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-cta" style="white-space: nowrap;">{{ t.saved_plans_convert_to_cart }}</button>
                    </form>
                    <form method="post" action="{% url 'market:plan_delete' plan.id %}" onsubmit="return confirm('Delete this plan?');">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: var(--muted); width: 100%;">{{ t.saved_plans_delete }}</button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
        <p>{{ t.saved_plans_empty }}</p>
        {% endif %}
    </div>
</section>
{% endblock %}