{% extends "base.html" %}

{% block title %}{{ device.asset_tag }} - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{{ device.asset_tag }}</h1>
    <div class="action-buttons">
        <a href="{{ url_for('device_edit', device_id=device.id) }}" class="btn">Edit</a>
        {% if device.status == 'available' %}
        <a href="{{ url_for('stage_checkout') }}?device_id={{ device.id }}" class="btn btn-primary">Checkout</a>
        {% elif device.status == 'assigned' %}
        <a href="{{ url_for('checkin') }}?device_id={{ device.id }}" class="btn btn-primary">Check In</a>
        {% endif %}
    </div>
</div>

<div class="two-col">
    <div>
        <div class="section-header">Device Details</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Status</span>
                <span class="detail-value">
                    <span class="status-badge status-{{ device.status }}">{{ device.status|capitalize }}</span>
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Asset Tag</span>
                <span class="detail-value">{{ device.asset_tag }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Serial Number</span>
                <span class="detail-value">{{ device.serial_number }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Make</span>
                <span class="detail-value">{{ device.make }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Model</span>
                <span class="detail-value">{{ device.model }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Hostname</span>
                <span class="detail-value">{{ device.hostname or '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Added</span>
                <span class="detail-value">{{ device.created_at[:10] if device.created_at else '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Updated</span>
                <span class="detail-value">{{ device.updated_at[:10] if device.updated_at else '-' }}</span>
            </div>
        </div>
    </div>

    {% if current_assignment %}
    <div>
        <div class="section-header">Current Assignment</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Assigned To</span>
                <span class="detail-value">
                    <a href="{{ url_for('person_detail', person_id=current_assignment.person_id) }}">
                        {{ current_assignment.person_name }}
                    </a>
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Since</span>
                <span class="detail-value">{{ current_assignment.checkout_date[:10] if current_assignment.checkout_date else '-' }}</span>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<div class="section-header mt-3">Transaction History</div>
<div class="card">
    {% if transactions %}
    <div class="mobile-cards mobile-cards-flush">
        {% for t in transactions %}
        <a href="{{ url_for('transaction_detail', transaction_id=t.id) }}" class="list-row">
            <div class="list-row-content">
                <div class="list-row-title">
                    <span class="{% if t.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                        {{ 'OUT' if t.transaction_type == 'check_out' else 'IN' }}
                    </span>
                    {{ t.person_name }}
                </div>
                <div class="list-row-subtitle">
                    {{ t.created_at[:10] if t.created_at else '-' }}
                    {% if t.condition_on_return %} &middot; Condition: {{ t.condition_on_return }}{% endif %}
                </div>
            </div>
            <span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span>
            <div class="list-row-chevron"></div>
        </a>
        {% endfor %}
    </div>
    <div class="table-wrapper table-wrapper-flush">
        <table>
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Person</th>
                    <th>Date</th>
                    <th>Status</th>
                    <th>Condition</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for t in transactions %}
                <tr>
                    <td class="{% if t.transaction_type == 'check_out' %}transaction-type-checkout{% else %}transaction-type-checkin{% endif %}">
                        {{ 'OUT' if t.transaction_type == 'check_out' else 'IN' }}
                    </td>
                    <td>{{ t.person_name }}</td>
                    <td>{{ t.created_at[:10] if t.created_at else '-' }}</td>
                    <td><span class="status-badge status-{{ t.status }}">{{ t.status|capitalize }}</span></td>
                    <td>{{ t.condition_on_return or '-' }}</td>
                    <td>
                        <a href="{{ url_for('transaction_detail', transaction_id=t.id) }}" class="btn btn-sm">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <p>No transaction history for this device.</p>
    </div>
    {% endif %}
</div>
{% endblock %}