{% extends "base.html" %}

{% block title %}Orders — Django-Dolt Demo{% endblock %}
{% block nav_orders %}class="active"{% endblock %}

{% block content %}
<div class="page-header fade-up">
    <h1>Orders</h1>
    <p class="subtitle">Customer orders tracked in the <code>orders</code> Dolt database.</p>
</div>

<div class="grid grid-2-1">
    <!-- Orders table -->
    <div class="fade-up delay-1">
        <div class="card">
            <h2>All Orders</h2>
            {% if orders %}
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Order</th>
                            <th>Customer</th>
                            <th>Status</th>
                            <th class="text-right">Total</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr>
                            <td><code>{{ order.order_number }}</code></td>
                            <td>{{ order.customer.first_name }} {{ order.customer.last_name }}</td>
                            <td><span class="badge badge-{{ order.status }}">{{ order.get_status_display }}</span></td>
                            <td class="text-right mono">${{ order.total_amount }}</td>
                            <td class="muted text-sm">{{ order.created_at|date:"M d, Y" }}</td>
                            <td><a href="/admin/demo_app/order/{{ order.pk }}/change/" class="btn btn-sm">Edit</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty">No orders yet. Run <code>setup_demo</code> or add via <a href="/admin/">admin</a>.</div>
            {% endif %}
        </div>
    </div>

    <!-- Sidebar: Dolt status + commits -->
    <div class="fade-up delay-2">
        <div class="card">
            <div class="card-label">Working Set</div>
            {% if dolt_status %}
            <div class="mb-1">
                {% for item in dolt_status %}
                <div class="status-row">
                    <span class="status-dot {% if item.status == 'new table' %}new{% elif item.status == 'modified' %}modified{% else %}deleted{% endif %}"></span>
                    <span class="status-table">{{ item.table_name }}</span>
                    <span class="status-type">{{ item.status }}</span>
                </div>
                {% endfor %}
            </div>
            {% if user.is_authenticated %}
            <form method="post" action="{% url 'dolt_commit' 'orders' %}">
                {% csrf_token %}
                <input type="hidden" name="next" value="{% url 'orders' %}">
                <div style="display:flex;gap:0.4rem;">
                    <input type="text" name="message" class="input" placeholder="Commit message..." required style="flex:1;">
                    <button type="submit" class="btn btn-accent btn-sm">Commit</button>
                </div>
            </form>
            {% endif %}
            {% else %}
            <p class="muted text-sm" style="padding:0.5rem 0;">Nothing to commit.</p>
            {% endif %}
        </div>

        <div class="card">
            <div class="card-label">Recent Commits</div>
            {% if dolt_commits %}
            {% for commit in dolt_commits %}
            <div class="commit-row">
                <span class="commit-hash">{{ commit.commit_hash|truncatechars:11 }}</span>
                <span class="commit-msg">{{ commit.message|truncatechars:40 }}</span>
                <span class="commit-date">{{ commit.date|date:"M d" }}</span>
            </div>
            {% endfor %}
            {% else %}
            <p class="muted text-sm" style="padding:0.5rem 0;">No commits yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}