{% extends "base.html" %}

{% block title %}Devices - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Devices</h1>
    <a href="{{ url_for('device_add') }}" class="btn btn-primary">Add Device</a>
</div>

<div class="filter-tabs">
    <a href="{{ url_for('devices_list', status='all', search=search) }}"
       class="filter-tab {% if status_filter == 'all' %}active{% endif %}">All</a>
    <a href="{{ url_for('devices_list', status='available', search=search) }}"
       class="filter-tab {% if status_filter == 'available' %}active{% endif %}">Available</a>
    <a href="{{ url_for('devices_list', status='pending', search=search) }}"
       class="filter-tab {% if status_filter == 'pending' %}active{% endif %}">Pending</a>
    <a href="{{ url_for('devices_list', status='assigned', search=search) }}"
       class="filter-tab {% if status_filter == 'assigned' %}active{% endif %}">Assigned</a>
    <a href="{{ url_for('devices_list', status='retired', search=search) }}"
       class="filter-tab {% if status_filter == 'retired' %}active{% endif %}">Retired</a>
</div>

<form method="GET">
    <input type="hidden" name="status" value="{{ status_filter }}">
    <div class="search-bar">
        <input type="text" name="search" placeholder="Search devices..." value="{{ search }}">
        {% if search %}
        <a href="{{ url_for('devices_list', status=status_filter) }}" class="search-clear">&times;</a>
        {% endif %}
    </div>
</form>

{% if devices %}
<div class="mobile-cards">
    {% for device in devices %}
    <a href="{{ url_for('device_detail', device_id=device.id) }}" class="device-card">
        <div class="device-card-header">
            <span class="device-card-title">{{ device.asset_tag }}</span>
            <span class="status-badge status-{{ device.status }}">{{ device.status|capitalize }}</span>
        </div>
        <div class="device-card-meta">
            {{ device.make }} {{ device.model }}<br>
            S/N: {{ device.serial_number }}
            {% if device.hostname %}<br>Host: {{ device.hostname }}{% endif %}
        </div>
    </a>
    {% endfor %}
</div>

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Asset Tag</th>
                <th>Serial Number</th>
                <th>Make</th>
                <th>Model</th>
                <th>Hostname</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for device in devices %}
            <tr>
                <td><a href="{{ url_for('device_detail', device_id=device.id) }}">{{ device.asset_tag }}</a></td>
                <td>{{ device.serial_number }}</td>
                <td>{{ device.make }}</td>
                <td>{{ device.model }}</td>
                <td>{{ device.hostname or '-' }}</td>
                <td><span class="status-badge status-{{ device.status }}">{{ device.status|capitalize }}</span></td>
                <td>
                    <a href="{{ url_for('device_edit', device_id=device.id) }}" class="btn btn-sm">Edit</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="empty-state">
    <p>No devices found{% if search %} matching "{{ search }}"{% endif %}.</p>
    <a href="{{ url_for('device_add') }}" class="btn btn-primary">Add First Device</a>
</div>
{% endif %}
{% endblock %}