{% extends "base.html" %}

{% block title %}{{ person.name }} - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{{ person.name }}</h1>
    <a href="{{ url_for('person_edit', person_id=person.id) }}" class="btn">Edit</a>
</div>

<div class="two-col">
    <div>
        <div class="section-header">Person Details</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Name</span>
                <span class="detail-value">{{ person.name }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Location</span>
                <span class="detail-value">{{ person.location or '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Position</span>
                <span class="detail-value">{{ person.position or '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Phone</span>
                <span class="detail-value">{{ person.phone or '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Email</span>
                <span class="detail-value">{{ person.email or '-' }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Added</span>
                <span class="detail-value">{{ person.created_at[:10] if person.created_at else '-' }}</span>
            </div>
        </div>
    </div>
</div>

<div class="section-header mt-3">Device 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.asset_tag }}
                </div>
                <div class="list-row-subtitle">{{ t.make }} {{ t.model }} &middot; {{ t.created_at[:10] if t.created_at else '-' }}</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>Device</th>
                    <th>Date</th>
                    <th>Status</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><a href="{{ url_for('device_detail', device_id=t.device_id) }}">{{ t.asset_tag }}</a></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><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 device history for this person.</p>
    </div>
    {% endif %}
</div>
{% endblock %}