{% extends "base.html" %}
{% block title %}工单看板{% endblock %}
{% block content %}
<h1 style="margin-bottom:20px;font-size:24px;">📊 工单看板</h1>

<!-- 工单总数 + 我的工单 -->
<div style="display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;">
    <div class="stat-card total" style="max-width:200px;flex:1;">
        <div class="num">{{ total }}</div>
        <div class="label">总工单数</div>
    </div>
    <div class="stat-card" style="max-width:200px;flex:1;">
        <div class="num" style="color:var(--primary)">{{ my_tickets }}</div>
        <div class="label">我的工单</div>
    </div>
</div>

<!-- 状态分布 -->
<h2 class="section-title">按状态</h2>
<div class="stats-grid">
    {% for k, v in by_status.items() %}
    <div class="stat-card {{ k }}">
        <div class="num">{{ v.count }}</div>
        <div class="label">{{ v.label }}</div>
    </div>
    {% endfor %}
</div>

<!-- 优先级分布 -->
<h2 class="section-title">按优先级</h2>
<div class="stats-grid">
    {% for k, v in by_priority.items() %}
    <div class="stat-card">
        <div class="num" style="color:var(--primary)">{{ v.count }}</div>
        <div class="label">{{ v.label }}</div>
    </div>
    {% endfor %}
</div>

<!-- 分类分布 -->
<h2 class="section-title">按分类</h2>
<div class="stats-grid">
    {% for k, v in by_category.items() %}
    <div class="stat-card">
        <div class="num" style="color:var(--primary)">{{ v.count }}</div>
        <div class="label">{{ v.label }}</div>
    </div>
    {% endfor %}
</div>

<!-- 最近工单 -->
<h2 class="section-title">最近工单</h2>
<div class="card" style="padding:0;overflow:hidden;">
    {% if recent %}
    <table class="ticket-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>状态</th>
                <th>优先级</th>
                <th>更新</th>
            </tr>
        </thead>
        <tbody>
        {% for t in recent %}
        <tr>
            <td><a href="/ticket/{{ t.id }}">#{{ t.id }}</a></td>
            <td><a href="/ticket/{{ t.id }}">{{ t.title }}</a></td>
            <td><span class="badge badge-{{ t.status }}">{{ status_label(t.status) }}</span></td>
            <td><span class="badge badge-{{ t.priority }}">{{ priority_label(t.priority) }}</span></td>
            <td style="color:var(--text-muted);font-size:13px;">{{ t.updated_at.strftime('%m-%d %H:%M') }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="padding:20px;color:var(--text-muted);text-align:center;">暂无工单</p>
    {% endif %}
</div>
{% endblock %}