{% extends 'layouts/app.html' %}
{% block title %}Estate Inspections - Facilities Management{% endblock %}
{% block sidebar %}{% include 'components/sidebar.html' %}{% endblock %}
{% block topbar %}
<div class="topbar-title">
    <h1>Estate Inspections</h1>
    <p>Fire door checks and estate inspection reports</p>
</div>
<div class="topbar-actions">
    <a href="/fire-door/report/new" class="btn btn-primary">+ New Inspection</a>
</div>
{% endblock %}
{% block content %}
<div style="max-width:1100px;margin:0 auto;padding:0;">

    <div style="background:#fff;border:1px solid #e4e8ef;border-radius:12px;padding:24px;margin-bottom:20px;">
        <h2 style="margin:0 0 16px 0;font-size:15px;font-weight:600;color:#1a2130;">Fire Door & Estate Reports</h2>
        <div style="display:flex;gap:12px;flex-wrap:wrap;">
            <a href="/fire-door/reports"
               style="padding:10px 20px;background:#2563eb;color:white;text-decoration:none;border-radius:8px;font-weight:500;font-size:13px;">
                View All Reports
            </a>
            <a href="/fire-door/report/new"
               style="padding:10px 20px;background:#16a34a;color:white;text-decoration:none;border-radius:8px;font-weight:500;font-size:13px;">
                + New Inspection
            </a>
        </div>
    </div>

    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
        <div style="background:#fff;border:1px solid #e4e8ef;border-radius:12px;padding:20px;">
            <div style="font-size:24px;margin-bottom:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon" style="color:#dc2626"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z"></path></svg></div>
            <div style="font-weight:600;color:#1a2130;font-size:14px;">Fire Door Checks</div>
            <div style="color:#8896aa;font-size:12px;margin-top:6px;line-height:1.6;">Inspect fire doors across estates and log condition, defects and remedial actions required.</div>
        </div>
        <div style="background:#fff;border:1px solid #e4e8ef;border-radius:12px;padding:20px;">
            <div style="font-size:24px;margin-bottom:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon" style="color:#2563eb"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg></div>
            <div style="font-weight:600;color:#1a2130;font-size:14px;">Photo Evidence</div>
            <div style="color:#8896aa;font-size:12px;margin-top:6px;line-height:1.6;">Attach photo evidence to inspection records and generate PDF reports for clients.</div>
        </div>
        <div style="background:#fff;border:1px solid #e4e8ef;border-radius:12px;padding:20px;">
            <div style="font-size:24px;margin-bottom:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon" style="color:#7c3aed"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M2 15h10"></path><path d="M9 12l3 3-3 3"></path></svg></div>
            <div style="font-weight:600;color:#1a2130;font-size:14px;">PDF Reports</div>
            <div style="color:#8896aa;font-size:12px;margin-top:6px;line-height:1.6;">Export professional inspection reports as PDFs for handover to building owners and tenants.</div>
        </div>
    </div>
</div>
{% endblock %}