{% extends 'mobile/base.html' %}

{% block title %}Minhas OS | App{% endblock %}

{% block content %}
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
    <div>
        <div style="color:#475569; font-size:.75rem; font-weight:800; letter-spacing:.10em;">Minhas OS</div>
        <div style="font-weight:800; font-size:1.15rem; color:#0B1120;">{{ locacoes|length }} ordens</div>
    </div>
    <a href="{% url 'mobile:reportar' %}" style="padding:8px 12px; border-radius:8px; background:#0B1120; color:#fff; text-decoration:none; font-weight:700; font-size:.70rem;">+ Reportar</a>
</div>

{% for loc in locacoes %}
<a href="{% url 'mobile:os_detail' loc.id %}" style="text-decoration:none; display:block;">
<div class="m-card" style="padding:14px; transition:transform .18s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='none'">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
        <span style="font-size:.70rem; font-weight:800; letter-spacing:.08em; color:#64748B;">#{{ loc.id|stringformat:"04d" }} · {{ loc.get_status_display|upper }}</span>
        <span style="padding:3px 8px; border-radius:20px; font-size:.70rem; font-weight:800; {% if loc.status == 'ATIVA' %}background:#E0F2FE; color:#0284C7;{% elif loc.status == 'AGENDADA' %}background:#FEF3C7; color:#D97706;{% else %}background:#D1FAE5; color:#059669;{% endif %}">{{ loc.status }}</span>
    </div>
    <div style="font-weight:800; font-size:.90rem; color:#0B1120;">{{ loc.equipamento }}</div>
    <div style="color:#0284C7; font-size:.72rem; font-weight:700; margin-top:2px;">{{ loc.obra }}</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px;">{{ loc.cliente|default:"Sem cliente" }} · {{ loc.data_retirada|date:"d/m/Y" }} → {{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }}</div>
    <div style="margin-top:10px; display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC;">
        <span style="color:#475569; font-size:.68rem;">Período</span><strong style="color:#0B1120; font-size:.72rem;">{{ loc.data_retirada|date:"d/m" }} → {{ loc.data_devolucao_prevista|date:"d/m"|default:"—" }}</strong>
    </div>
    <div style="margin-top:10px; display:flex; justify-content:space-between; align-items:center;">
        <span style="color:#64748B; font-size:.75rem; font-weight:700;">Toque para detalhes →</span>
        <span style="padding:4px 8px; border-radius:6px; background:#0B1120; color:#fff; font-size:.70rem; font-weight:800;">ABRIR</span>
    </div>
</div>
</a>
{% empty %}
<div class="m-card" style="padding:24px; text-align:center;">
    <div style="font-size:1.4rem;">⧉</div>
    <div style="font-weight:800; margin-top:8px;">Nenhuma OS</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px;">Suas ordens aparecerão aqui.</div>
</div>
{% endfor %}
{% endblock %}