{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}ORBAT Tracker — Strategos{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>ORBAT Tracker <span style="font-size:0.65em;color:var(--text-secondary);font-weight:400;">Order of Battle</span></h1>
    <a href="/strategos" style="font-size:.85rem;color:var(--text-secondary)">&larr; Back to Strategos</a>
</div>

<form method="get" style="display:flex;gap:.75rem;margin-bottom:1rem;align-items:flex-end">
    <div>
        <label style="display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:.25rem">Nation</label>
        <input name="nation" value="{{ selected_nation }}" placeholder="Filter by nation…"
               style="padding:.4rem .75rem;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px">
    </div>
    <div>
        <label style="display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:.25rem">Unit Type</label>
        <select name="unit_type" style="padding:.4rem .75rem;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px">
            <option value="">All types</option>
            {% for t in unit_types %}
            <option value="{{ t }}" {% if t == selected_type %}selected{% endif %}>{{ t|replace('_',' ')|title }}</option>
            {% endfor %}
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Filter</button>
    {% if selected_nation or selected_type %}<a href="/strategos/orbat" class="btn">Clear</a>{% endif %}
</form>

<div class="card" style="padding:0;overflow:auto">
    <table style="width:100%;border-collapse:collapse;font-size:.875rem">
        <thead>
            <tr style="background:var(--bg-secondary)">
                <th style="padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)">Unit Name</th>
                <th style="padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)">Type</th>
                <th style="padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)">Nation</th>
                <th style="padding:.6rem 1rem;text-align:right;border-bottom:1px solid var(--border-color)">Strength</th>
                <th style="padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)">Location</th>
                <th style="padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)">Status</th>
            </tr>
        </thead>
        <tbody>
            {% for u in units %}
            <tr style="border-bottom:1px solid var(--border-color);cursor:context-menu"
                data-unit-id="{{ u.id }}"
                data-unit-name="{{ u.unit_name }}"
                data-side="{{ u.nation or '' }}"
                data-strength="{{ u.strength or '' }}">
                <td style="padding:.55rem 1rem;font-weight:500">{{ u.unit_name }}</td>
                <td style="padding:.55rem 1rem;color:var(--text-secondary)">{{ u.unit_type|replace('_',' ')|title }}</td>
                <td style="padding:.55rem 1rem">{{ u.nation or '—' }}</td>
                <td style="padding:.55rem 1rem;text-align:right">{{ u.strength or '—' }}</td>
                <td style="padding:.55rem 1rem;color:var(--text-secondary)">{{ u.location or '—' }}</td>
                <td style="padding:.55rem 1rem">
                    <span style="padding:.1rem .5rem;border-radius:3px;font-size:.78rem;background:{% if u.status=='active' %}rgba(16,185,129,.15){% else %}var(--bg-secondary){% endif %};color:{% if u.status=='active' %}#10b981{% else %}var(--text-secondary){% endif %}">
                        {{ u.status or 'unknown' }}
                    </span>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="6" style="padding:2rem;text-align:center;color:var(--text-muted)">No ORBAT units found.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div style="margin-top:.5rem;font-size:.8rem;color:var(--text-muted)">{{ units|length }} unit(s) — right-click any row to ask STRATEGOS</div>
{% endblock %}
{% block scripts %}
<script>
document.querySelectorAll('tr[data-unit-id]').forEach(function(el) {
  el.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    if (typeof window.sgChat === 'undefined') return;
    window.sgChat.showMenu(e.clientX, e.clientY, {
      type: 'orbat_unit',
      unit_id: el.dataset.unitId,
      label: el.dataset.unitName,
      side: el.dataset.side || 'Unknown',
      strength: el.dataset.strength || 'Unknown',
    });
  });
});
</script>
{% endblock %}