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

{% block title %}Minhas Obras | 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; text-transform:uppercase;">Minhas obras</div>
        <div style="font-weight:800; font-size:1.15rem; color:#0B1120; margin-top:2px;">{{ projects|length }} obras ativas</div>
    </div>
    <span style="padding:6px 10px; border-radius:20px; background:#D1FAE5; color:#0284C7; font-size:.75rem; font-weight:800;">Online</span>
</div>

{% for project in projects %}
<a href="{% url 'mobile:obra_detail' project.code %}" style="text-decoration:none; display:block;">
<div class="m-card" style="padding:0; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(2,132,199,.10)'" onmouseout="this.style.transform='none'; this.style.boxShadow='0 2px 12px rgba(2,132,199,.06)'">
    <div style="height:4px; background:{% if project.status_class == 'complete' %}#059669;{% elif project.status_class == 'progress' %}#0284C7;{% else %}#64748B;{% endif %}"></div>
    <div style="padding:14px 16px;">
        <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;">{{ project.code }}</span>
            <span style="padding:4px 8px; border-radius:20px; background:{% if project.status_class == 'complete' %}#D1FAE5; color:#059669;{% elif project.status_class == 'progress' %}#FEF3C7; color:#D97706;{% else %}#E0F2FE; color:#0284C7;{% endif %} font-size:.70rem; font-weight:800;">{{ project.status }}</span>
        </div>
        <div style="font-weight:800; font-size:1rem; color:#0B1120; line-height:1.25;">{{ project.name }}</div>
        <div style="color:#0284C7; font-size:.72rem; font-weight:700; margin-top:3px;">{{ project.client }}</div>
        <div style="color:#475569; font-size:.68rem; margin-top:6px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">{{ project.description }}</div>
        <div style="margin-top:12px; display:grid; grid-template-columns: 1fr 1fr; gap:8px;">
            <div style="padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC;">
                <div style="color:#64748B; font-size:.70rem; font-weight:800; letter-spacing:.06em;">PROGRESSO</div>
                <div style="display:flex; align-items:baseline; gap:6px; margin-top:4px;"><span style="font-weight:800; color:#0B1120; font-size:.95rem;">{{ project.progress }}%</span><span style="color:#475569; font-size:.70rem;">· {{ project.deadline }}</span></div>
                <div style="height:4px; background:#E6EEF1; border-radius:4px; margin-top:8px;"><div style="height:100%; width:{{ project.progress }}%; background:{% if project.status_class == 'complete' %}#059669;{% else %}#0284C7;{% endif %} border-radius:4px;"></div></div>
            </div>
            <div style="padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC;">
                <div style="color:#64748B; font-size:.70rem; font-weight:800; letter-spacing:.06em;">EQUIPE</div>
                <div style="font-weight:800; color:#0B1120; margin-top:4px; font-size:.85rem;">{{ project.team|length }} pessoas</div>
                <div style="color:#475569; font-size:.70rem; margin-top:2px;">{{ project.manager }}</div>
            </div>
        </div>
        <div style="margin-top:12px; display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid #E6EEF1;">
            <span style="color:#0284C7; font-size:.72rem; font-weight:700;">Toque para detalhes →</span>
            <span style="padding:6px 10px; border-radius:8px; background:#0B1120; color:#fff; font-size:.70rem; font-weight:800;">ABRIR</span>
        </div>
    </div>
</div>
</a>
{% endfor %}

<div class="m-card" style="padding:14px; background:#D1FAE5; border-color:#BAE6FD;">
    <div style="font-weight:800; color:#0284C7; font-size:.78rem;">📲 Como reportar</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px; line-height:1.5;">Toque em <strong>Reportar</strong> em qualquer obra, tire foto, descreva e envie — cai direto no sistema web em <em>Observações</em>.</div>
</div>
{% endblock %}