{% extends 'base.html' %}
{% block title %}{{ t.title_my_orders }} — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <h1>{{ t.orders_title }}</h1>

        {% if orders %}
        {% for order in orders %}
        <div class="order-card">
            <a href="{% url 'market:order_detail' order.id %}" style="display: block; text-decoration: none; color: inherit;">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                    <div>
                        <strong>{{ t.order_hash_prefix }}{{ order.id }}</strong>
                        {% if order.is_quick %}<span class="surface-badge warn">{{ t.badge_quick_delivery }}</span>{% endif %}
                        <p style="color: var(--muted); font-size: 0.88rem;">{{ order.delivery_date }} &middot; {{ order.delivery_time_slot }}</p>
                    </div>
                    <div style="text-align: right;">
                        <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
                        <p style="margin-top: 6px; font-weight: 700;">TSh {{ order.total_amount|floatformat:0 }}</p>
                    </div>
                </div>

                {% if order.tracker_step_index > -1 %}
                <div class="mini-tracker">
                    {% for step in tracker_steps %}
                    <div class="mini-tracker-dot {% if forloop.counter0 < order.tracker_step_index %}done{% elif forloop.counter0 == order.tracker_step_index %}active{% endif %}"></div>
                    {% if not forloop.last %}<div class="mini-tracker-line {% if forloop.counter0 < order.tracker_step_index %}done{% endif %}"></div>{% endif %}
                    {% endfor %}
                </div>
                {% endif %}
            </a>

            {% if order.status == 'delivered' %}
            <form method="post" action="{% url 'market:reorder' order.id %}" style="margin-top: 12px;">
                {% csrf_token %}
                <button type="submit" class="btn-small" style="background: var(--blue);">{{ t.orders_reorder }} &rarr;</button>
            </form>
            {% endif %}
        </div>
        {% endfor %}
        {% else %}
        <p>{{ t.orders_empty }} <a href="{% url 'market:market' %}">{{ t.orders_browse_market }}</a> {{ t.orders_to_get_started }}</p>
        {% endif %}
    </div>
</section>
{% endblock %}