{% extends "base.html" %}

{% block title %}Import Preview - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Import Preview</h1>
</div>

<div class="preview-info">
    Found <strong>{{ total_rows }}</strong> records to import. Showing first {{ preview|length }} rows.
</div>

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Asset #</th>
                <th>Brand</th>
                <th>Model</th>
                <th>Serial #</th>
                <th>Checkout</th>
                <th>Return</th>
            </tr>
        </thead>
        <tbody>
            {% for row in preview %}
            <tr>
                <td>{{ row.name or '-' }}</td>
                <td>{{ row.department or '-' }}</td>
                <td>{{ row.asset or '-' }}</td>
                <td>{{ row.brand or '-' }}</td>
                <td>{{ row.model or '-' }}</td>
                <td>{{ row.serial or '-' }}</td>
                <td>{{ row.checkout_date or '-' }}</td>
                <td>{{ row.return_date or '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="mobile-cards">
    {% for row in preview %}
    <div class="device-card">
        <div class="device-card-title">{{ row.name or 'Unknown' }}</div>
        <div class="device-card-meta">
            {{ row.asset or '-' }} &middot; {{ row.brand or '-' }} {{ row.model or '-' }}<br>
            S/N: {{ row.serial or '-' }}<br>
            Out: {{ row.checkout_date or '-' }} &middot; In: {{ row.return_date or '-' }}
        </div>
    </div>
    {% endfor %}
</div>

<div class="section-header mt-3">Import Notes</div>
<div class="card">
    <ul class="column-guide import-notes-list">
        <li>Devices will be created if they don't exist (matched by asset tag)</li>
        <li>People will be created if they don't exist (matched by name)</li>
        <li>Records will be marked as "legacy" (imported data, no signatures)</li>
        <li>Rows without return dates will set devices to "assigned"</li>
        <li>Rows with return dates will set devices to "available"</li>
    </ul>
</div>

<form method="POST" action="{{ url_for('import_confirm') }}" class="mt-3">
    <input type="hidden" name="filename" value="{{ filename }}">

    <div class="section-header">Import Options</div>
    <div class="import-options-box">
        <label class="import-checkbox-label">
            <input type="checkbox" name="only_checked_out" value="1" class="import-checkbox">
            <span>Only import currently checked out items (no return date)</span>
        </label>

        {% if unique_models %}
        <div class="mt-2">
            <label class="caption mb-1">Exclude Models</label>
            <div class="import-model-chips">
                {% for model in unique_models %}
                <label class="import-model-chip">
                    <input type="checkbox" name="exclude_models" value="{{ model }}" class="import-checkbox-sm">
                    <span class="subhead">{{ model }}</span>
                </label>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <div class="action-buttons mt-3">
        <button type="submit" class="btn btn-primary btn-lg">Confirm Import</button>
        <a href="{{ url_for('import_data') }}" class="btn btn-lg">Cancel</a>
    </div>
</form>
{% endblock %}