{% extends "base.html" %}
{% from "units/_m.html" import unit_badge with context %}
{% block title %}{{ t('Units') }}{% endblock %}
{% block content %}
<div class="page-head">
  <div><h1>{{ t('Units') }}</h1><p class="muted" style="margin:4px 0 0">{{ t('Every portable unit made, by serial number, from the factory to handover or rent.') }}</p></div>
  {% if can_write %}<div class="actions"><a class="btn ghost" href="{{ url_for('units.dispatches') }}">{{ t('Dispatch Notes') }}</a><a class="btn" href="{{ url_for('units.dispatch_form') }}">+ {{ t('New dispatch') }}</a></div>{% endif %}
</div>
<div class="tabs">
  <a href="{{ url_for('units.index', project=project) }}" class="{{ 'active' if not state }}">{{ t('All') }} <small>{{ counts.values()|sum }}</small></a>
  {% for k, l in states.items() %}{% if counts.get(k) %}<a href="{{ url_for('units.index', state=k, project=project) }}" class="{{ 'active' if state == k }}">{{ t(l) }} <small>{{ counts[k] }}</small></a>{% endif %}{% endfor %}
</div>
<form class="filters" method="get"><input type="hidden" name="state" value="{{ state }}">
  <input type="search" name="q" value="{{ search }}" placeholder="{{ t('Serial, product, site or project') }}" aria-label="{{ t('Search') }}">
  <select name="project" aria-label="{{ t('Project') }}"><option value="">{{ t('All projects') }}</option>{% for p in projects %}<option value="{{ p.id }}" {{ 'selected' if p.id == project }}>{{ p.code }} — {{ nm(p) }}</option>{% endfor %}</select>
  <button class="btn ghost">{{ t('Filter') }}</button></form>
<form method="post" action="{{ url_for('units.bulk') }}" class="card flush">
  {% if can_write %}<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)">
    <small class="muted">{{ t('With the ticked units') }}:</small>
    <button class="btn ghost" name="action" value="dispatch">{{ t('Dispatch to site') }}</button>
    <button class="btn ghost" name="action" value="installed">{{ t('Mark installed') }}</button>
    <button class="btn ghost" name="action" value="handed_over">{{ t('Hand over') }}</button>
    <button class="btn ghost" name="action" value="fleet" data-confirm="{{ t('Move the ticked units to the rental fleet? They leave stock and become fixed assets.') }}">{{ t('To rental fleet') }}</button>
    <button class="btn ghost" name="action" value="labels">{{ t('Print QR labels') }}</button>
    <input type="date" name="date" aria-label="{{ t('Date') }}" style="margin-inline-start:auto">
  </div>{% endif %}
  <table>
    <thead><tr><th style="width:36px"><input type="checkbox" class="cb" onclick="document.querySelectorAll('input[name=ids]').forEach(c => c.checked = this.checked)" aria-label="{{ t('Select all') }}"></th>
      <th>{{ t('Serial') }}</th><th>{{ t('Product') }}</th><th>{{ t('Project') }}</th><th>{{ t('Customer') }} / {{ t('Site') }}</th><th class="num">{{ t('Cost') }}</th><th>{{ t('Status') }}</th><th>{{ t('Warranty until') }}</th></tr></thead>
    <tbody>{% for u in rows %}
      <tr data-href="{{ url_for('units.unit', unit_id=u.id) }}"><td><input type="checkbox" class="cb" name="ids" value="{{ u.id }}" aria-label="{{ u.serial }}"></td>
        <td><b>{{ u.serial }}</b><br><small class="muted">{{ u.mo_number or '' }}</small></td><td>{{ nm(u) }}<br><small class="muted">{{ u.code }}</small></td>
        <td>{{ u.pcode or '—' }}</td><td>{{ u.cust_en or '—' }}{% if u.site %}<br><small class="muted">{{ u.site }}</small>{% endif %}</td>
        <td class="num">{{ u.cost|money }}</td><td>{{ unit_badge(u.state) }}</td><td>{{ u.warranty_until or '—' }}</td></tr>
    {% else %}<tr><td colspan="8" class="empty">{{ t('No units yet. Units are created when a production order of a serial-numbered product is finished.') }}</td></tr>{% endfor %}</tbody>
  </table>
</form>
{% endblock %}