{% extends "base.html" %}

{% block title %}{{ 'Edit' if device else 'Add' }} Device - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{{ 'Edit' if device else 'Add' }} Device</h1>
</div>

<form method="POST" class="content-narrow">
    <div class="section-header">Device Information</div>
    <div class="form-grouped">
        <div class="form-row">
            <label for="asset_tag">Asset Tag *</label>
            <input type="text" id="asset_tag" name="asset_tag" required
                   value="{{ device.asset_tag if device else '' }}" placeholder="e.g., IT-L001">
        </div>
        <div class="form-row">
            <label for="serial_number">Serial *</label>
            <input type="text" id="serial_number" name="serial_number" required
                   value="{{ device.serial_number if device else '' }}" placeholder="e.g., ABC123XYZ">
        </div>
        <div class="form-row">
            <label for="make">Make *</label>
            <input type="text" id="make" name="make" required
                   value="{{ device.make if device else '' }}" placeholder="e.g., Dell, HP">
        </div>
        <div class="form-row">
            <label for="model">Model *</label>
            <input type="text" id="model" name="model" required
                   value="{{ device.model if device else '' }}" placeholder="e.g., Latitude 3450">
        </div>
        <div class="form-row">
            <label for="hostname">Hostname</label>
            <input type="text" id="hostname" name="hostname"
                   value="{{ device.hostname if device else '' }}" placeholder="Optional">
        </div>
    </div>

    {% if device %}
    <div class="section-header">Status</div>
    <div class="form-grouped">
        <div class="form-row">
            <label for="status">Status</label>
            <select id="status" name="status">
                <option value="available" {% if device.status == 'available' %}selected{% endif %}>Available</option>
                <option value="pending" {% if device.status == 'pending' %}selected{% endif %}>Pending</option>
                <option value="assigned" {% if device.status == 'assigned' %}selected{% endif %}>Assigned</option>
                <option value="retired" {% if device.status == 'retired' %}selected{% endif %}>Retired</option>
            </select>
        </div>
    </div>
    {% endif %}

    <div class="action-buttons mt-3">
        <button type="submit" class="btn btn-primary btn-lg">{{ 'Update' if device else 'Add' }} Device</button>
        <a href="{{ url_for('devices_list') }}" class="btn btn-lg">Cancel</a>
    </div>
</form>
{% endblock %}