{% extends "dashboard/base.html" %}

{% block title %}Companies - Command Center{% endblock %}

{% block content %}
<div class="page-header flex justify-between items-center">
    <div>
        <h1 class="page-title">Companies</h1>
        <p class="page-description">Manage your client portfolio</p>
    </div>
    <button class="btn btn-primary">+ Add Company</button>
</div>

{% if companies %}
<div class="grid grid-3">
    {% for company in companies %}
    <div class="card">
        <div class="card-content">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
                <h3 style="font-weight: 600;">{{ company.name }}</h3>
                <span class="badge badge-success">Active</span>
            </div>
            {% if company.industry %}
            <p class="text-sm text-muted mb-3">{{ company.industry }} · {{ company.size }} employees</p>
            {% endif %}
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
                <div>
                    <div class="text-xs text-muted">Annual Revenue</div>
                    <div style="font-weight: 600;">${% if company.annual_revenue %}{{ "{:,.0f}".format(company.annual_revenue) }}{% else %}—{% endif %}</div>
                </div>
                <div>
                    <div class="text-xs text-muted">Target Revenue</div>
                    <div style="font-weight: 600;">${% if company.target_revenue %}{{ "{:,.0f}".format(company.target_revenue) }}{% else %}—{% endif %}</div>
                </div>
            </div>
            <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">
                <a href="{{ url_for('dashboard.index') }}?company_id={{ company.id }}" class="btn btn-outline btn-sm btn-block">
                    View Dashboard →
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="card" style="margin-top: 2rem;">
    <div class="card-content" style="text-align: center; padding: 3rem;">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--muted-foreground)" stroke-width="1.5" style="margin-bottom: 1rem;">
            <path d="M3 21h18M5 21V7l8-4v18M13 21V3l8 4v14"/>
        </svg>
        <h2 class="card-title mb-2">No Companies Yet</h2>
        <p class="text-muted mb-4">Add your first company to start tracking revenue</p>
        <button class="btn btn-primary btn-lg">Add Your Company</button>
    </div>
</div>
{% endif %}
{% endblock %}