{% extends 'base.html' %}
{% block title %}Fleet Companies — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Fleet Companies</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            B2B customers can self-register their own delivery fleet. A company can't add trucks, invite drivers,
            or receive orders until approved here.
        </p>

        {% for company in companies %}
        <div class="order-card" style="margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;">
                <div>
                    <span class="surface-badge {% if company.is_approved %}ok{% else %}warn{% endif %}">
                        {% if company.is_approved %}Approved{% else %}Pending approval{% endif %}
                    </span>
                    <h3 style="margin: 8px 0 2px;">{{ company.company_name }}</h3>
                    {% if company.business_registration_number %}<p style="font-size: 0.85rem; color: var(--muted);">Reg #: {{ company.business_registration_number }}</p>{% endif %}
                    <p style="font-size: 0.82rem; color: var(--muted); margin-top: 4px;">Owner user ID: {{ company.owner_user_id }}</p>
                </div>
                {% if not company.is_approved %}
                <form method="post" action="{% url 'accounts:admin_approve_fleet_company' company.id %}">
                    {% csrf_token %}
                    <button type="submit" class="btn-small" style="background: var(--blue);">Approve</button>
                </form>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No fleet companies registered yet.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}