{% extends "modern/base.html" %}

{% block title %}Printers - Zebra Day{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">
        {% if lab %}
            {{ lab_display_name | default(lab_name | default(lab)) }} Printers
        {% else %}
            All Printers
        {% endif %}
    </h1>
    <p class="page-subtitle">View and manage Zebra printers</p>
</div>

<!-- Labs Navigation -->
{% if not lab and labs %}
<div class="card mb-lg">
    <div class="card-header">
        <h3 class="card-title">Select a Lab</h3>
    </div>
    <div class="grid grid-4">
        {% for lab_name in labs %}
        <a href="/printers/{{ lab_name }}" class="action-card">
            <i class="fas fa-building"></i>
            <div>
	                <strong>{{ (labs_meta | default({})).get(lab_name, {}).get("lab_display_name", lab_name) }}</strong>
                <small class="text-muted d-block">View printers</small>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Lab Details -->
{% if lab %}
<div class="card mb-lg">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-building"></i> Lab Details</h3>
    </div>
    <div class="card-body">
        <div class="grid grid-3">
            <div>
                <div class="text-muted">Lab Key</div>
                <div><strong>{{ lab }}</strong></div>
            </div>
            <div>
                <div class="text-muted">Display Name</div>
                <div><strong>{{ lab_display_name | default(lab_name | default(lab)) }}</strong></div>
            </div>
            <div>
                <div class="text-muted">Network Stub</div>
                <div><strong>{{ network_stub | default("—") }}</strong></div>
            </div>
        </div>
        {% if lab_description %}
        <div class="mt-md">
            <div class="text-muted">Description</div>
            <div>{{ lab_description }}</div>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Printers Table -->
{% if printers %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Printers{% if lab %} in {{ lab_display_name | default(lab_name | default(lab)) }}{% endif %}</h3>
        <div>
            {% if live_status %}
            <a href="/printers/{{ lab }}?live=0" class="btn btn-outline btn-sm" title="Disable live printer queries">
                <i class="fas fa-heartbeat"></i> Live
            </a>
            {% else %}
            <a href="/printers/{{ lab }}?live=1" class="btn btn-outline btn-sm" title="Enable live printer queries">
                <i class="fas fa-eye-slash"></i> Static
            </a>
            {% endif %}
            <a href="/printers/{{ lab }}?live=1" class="btn btn-outline btn-sm" title="Refresh live status">
                <i class="fas fa-sync"></i> Refresh
            </a>
            <a href="/config?action=scan&lab={{ lab | default('') }}" class="btn btn-outline btn-sm">
                <i class="fas fa-search"></i> Rescan Network
            </a>
        </div>
    </div>
    <div class="table-container" style="box-shadow: none;">
        <table class="table" style="font-size: 0.85rem;">
            <thead>
                <tr>
                    <th>ID / Name</th>
                    <th>Hardware</th>
                    <th>Network</th>
                    <th>Status</th>
                    <th>State</th>
                    <th>LSMC EUID</th>
                    <th>Label Styles</th>
                    <th style="width: 100px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for printer in printers %}
                <tr>
                    <td>
                        <strong>{{ printer.name }}</strong>
                        {% if printer.id != printer.name %}
                        <br><small class="text-muted">ID: {{ printer.id }}</small>
                        {% endif %}
                        {% if printer.lab_location %}
                        <br><span class="badge badge-info" style="font-size: 0.7rem;">{{ printer.lab_location }}</span>
                        {% endif %}
                    </td>
                    <td style="font-size: 0.8rem;">
                        <span title="Manufacturer">{{ printer.manufacturer | default('zebra') | title }}</span>
                        <span title="Model">{{ printer.model | default('—') }}</span>
                        <br><small class="text-muted" title="Serial">SN: {{ printer.serial | default('—') }}</small>
                        <br><small class="text-muted" title="Print Method">{{ printer.print_method | default('socket') }}</small>
                    </td>
                    <td>
                        {% if printer.ip_address != 'dl_png' %}
                        <a href="http://{{ printer.ip_address }}" target="_blank" title="Open printer web interface">{{ printer.ip_address }}</a>
                        {% else %}
                        <span class="text-muted">{{ printer.ip_address }}</span>
                        {% endif %}
                        {% if live_status and printer.firmware %}
                        <br><small class="text-muted" title="Firmware">FW: {{ printer.firmware }}</small>
                        {% endif %}
                        {% if live_status and printer.label_count is not none %}
                        <br><small class="text-muted" title="Labels printed">{{ printer.label_count }} labels</small>
                        {% endif %}
                    </td>
                    <td>
                        {# Status = Network reachability only (online/offline) #}
                        {% if printer.status == 'online' %}
                        <span class="badge badge-success"><i class="fas fa-wifi"></i> Online</span>
                        {% elif printer.status == 'offline' %}
                        <span class="badge badge-error"><i class="fas fa-times-circle"></i> Offline</span>
                        {% elif printer.status == 'na' %}
                        <span class="badge badge-info"><i class="fas fa-minus-circle"></i> N/A</span>
                        {% else %}
                        <span class="badge"><i class="fas fa-question-circle"></i> Unknown</span>
                        {% endif %}
                    </td>
                    <td>
                        {# State = Operational status (Ready/Paused/Error/Offline/Unknown) #}
                        {% if printer.state == 'Ready' %}
                        <span class="badge badge-success"><i class="fas fa-check-circle"></i> Ready</span>
                        {% elif printer.state == 'Paused' %}
                        <span class="badge badge-warning"><i class="fas fa-pause-circle"></i> Paused</span>
                        {% elif printer.state == 'Error' %}
                        <span class="badge badge-error"><i class="fas fa-exclamation-triangle"></i> Error
                            {% if printer.paper_out %}(Paper){% endif %}
                            {% if printer.ribbon_out %}(Ribbon){% endif %}
                            {% if printer.head_up %}(Head){% endif %}
                        </span>
                        {% elif printer.state == 'Offline' %}
                        <span class="badge" style="background: var(--color-gray-600);"><i class="fas fa-power-off"></i> Offline</span>
                        {% else %}
                        <span class="badge"><i class="fas fa-question-circle"></i> Unknown</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if printer.lsmc_euid %}
                        <code style="font-size: 0.8rem;">{{ printer.lsmc_euid }}</code>
                        {% else %}
                        <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td>
                        {% for style in printer.label_zpl_styles[:2] %}
                        <span class="badge badge-primary" style="font-size: 0.7rem;">{{ style }}</span>
                        {% endfor %}
                        {% if printer.label_zpl_styles | length > 2 %}
                        <span class="text-muted" style="font-size: 0.75rem;">+{{ printer.label_zpl_styles | length - 2 }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="/printers/{{ lab }}/{{ printer.id }}" class="btn btn-sm btn-outline" title="View details">
                            <i class="fas fa-info-circle"></i>
                        </a>
                        <a href="/print?lab={{ lab }}&printer={{ printer.id }}" class="btn btn-sm btn-primary" title="Print label">
                            <i class="fas fa-print"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% elif lab %}
<div class="card">
    <div class="empty-state">
        <i class="fas fa-print"></i>
        <p>No printers found in {{ lab }}</p>
        <a href="/config?action=scan&lab={{ lab }}" class="btn btn-primary">
            <i class="fas fa-wifi"></i> Scan Network
        </a>
    </div>
</div>
{% endif %}

<!-- Scan Network Card -->
<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Scan Network for Printers</h3>
    </div>
	    <form action="/config/scan" method="get" class="grid grid-5" onsubmit="return startNetworkScan(event, this)">
        <div class="form-group mb-0">
            <label class="form-label">IP Range</label>
            <input type="text" name="ip_stub" class="form-control" value="{{ ip_root | default('192.168.1') }}" placeholder="192.168.1">
        </div>
        <div class="form-group mb-0">
            <label class="form-label">Lab Name</label>
            <input type="text" name="lab" class="form-control" list="lab_names" value="{{ lab | default('') }}" placeholder="Enter lab name">
            <datalist id="lab_names">
                {% for lab_name in labs %}
                <option value="{{ lab_name }}">
                {% endfor %}
            </datalist>
        </div>
	        <div class="form-group mb-0">
	            <label class="form-label">Scan Wait</label>
	            <select name="scan_wait" class="form-control">
	                <option value="0.15">0.15s</option>
	                <option value="0.25">0.25s</option>
	                <option value="0.5" selected>0.5s</option>
	                <option value="1.0">1.0s</option>
	            </select>
	        </div>
        <div class="form-group mb-0">
            <label class="form-label">HTTP Port</label>
            <input type="number" name="scan_http_port" class="form-control" placeholder="optional" min="1" max="65535">
        </div>
        <div class="form-group mb-0" style="display: flex; align-items: flex-end;">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> Scan Network
            </button>
        </div>
    </form>
</div>
{% endblock %}