{% extends "base.html" %}

{% block title %}Pending Pickups - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Pending Pickups</h1>
    <a href="{{ url_for('stage_checkout') }}" class="btn btn-primary">Stage New</a>
</div>

{% if pending %}
<p class="subhead mb-3">
    {{ pending|length }} device(s) staged for pickup. Complete the pickup process to collect signatures.
</p>

{% for p in pending %}
<div class="pending-card">
    <div class="pending-card-header">
        <div>
            <h3 class="color-orange">{{ p.asset_tag }}</h3>
            <span class="status-badge status-pending">Pending Pickup</span>
        </div>
        <div class="action-buttons">
            <a href="{{ url_for('complete_checkout', transaction_id=p.id) }}" class="btn btn-primary">Complete Pickup</a>
            <form method="POST" action="{{ url_for('cancel_checkout', transaction_id=p.id) }}" class="inline-form">
                <button type="submit" class="btn btn-danger" onclick="return confirm('Cancel this pending checkout?')">Cancel</button>
            </form>
        </div>
    </div>

    <div class="two-col">
        <div>
            <div class="caption mb-1">Device Info</div>
            <div class="card mb-0">
                <div class="detail-row">
                    <span class="detail-label">Make/Model</span>
                    <span class="detail-value">{{ p.make }} {{ p.model }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Serial</span>
                    <span class="detail-value">{{ p.serial_number }}</span>
                </div>
                {% if p.hostname %}
                <div class="detail-row">
                    <span class="detail-label">Hostname</span>
                    <span class="detail-value">{{ p.hostname }}</span>
                </div>
                {% endif %}
            </div>
        </div>
        <div>
            <div class="caption mb-1">Recipient</div>
            <div class="card mb-0">
                <div class="detail-row">
                    <span class="detail-label">Name</span>
                    <span class="detail-value">{{ p.person_name }}</span>
                </div>
                {% if p.location %}
                <div class="detail-row">
                    <span class="detail-label">Location</span>
                    <span class="detail-value">{{ p.location }}</span>
                </div>
                {% endif %}
                {% if p.position %}
                <div class="detail-row">
                    <span class="detail-label">Position</span>
                    <span class="detail-value">{{ p.position }}</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if p.notes %}
    <div class="mt-2 subhead">
        <strong>Notes:</strong> {{ p.notes }}
    </div>
    {% endif %}

    <div class="mt-2 footnote text-muted">
        Staged: {{ p.created_at[:16] if p.created_at else '-' }}
    </div>
</div>
{% endfor %}

{% else %}
<div class="empty-state">
    <p>No pending pickups at this time.</p>
    <a href="{{ url_for('stage_checkout') }}" class="btn btn-primary">Stage a Checkout</a>
</div>
{% endif %}
{% endblock %}