{% load static %}
{% load advertiser_tags %}

<!-- Agency Card Component -->
<div class="card agency-card h-100">
    <div class="card-body">
        <div class="d-flex align-items-start">
            <div class="me-3">
                {% if agency.logo %}
                <img src="{{ agency.logo.url }}" alt="{{ agency.name }}" class="avatar avatar-lg">
                {% else %}
                <div class="avatar avatar-lg bg-primary-transparent">
                    <i class="fe fe-briefcase"></i>
                </div>
                {% endif %}
            </div>
            <div class="flex-grow-1">
                <h5 class="card-title mb-1">
                    <a href="{% url 'advertisers:agency_detail' agency.id %}" class="text-dark text-decoration-none">
                        {{ agency.name }}
                    </a>
                </h5>
                {% if agency.contact_person %}
                <p class="text-muted mb-2">{{ agency.contact_person }}</p>
                {% endif %}
                
                {% if agency.description %}
                <p class="card-text text-muted mb-3">{{ agency.description|truncate_chars:100 }}</p>
                {% endif %}
                
                <div class="d-flex align-items-center mb-2">
                    {% if agency.is_active %}
                    <span class="badge bg-success me-2">Active</span>
                    {% else %}
                    <span class="badge bg-secondary me-2">Inactive</span>
                    {% endif %}
                    
                    {% if agency.city %}
                    <small class="text-muted">
                        <i class="fe fe-map-pin me-1"></i>{{ agency.city }}{% if agency.country %}, {{ agency.country }}{% endif %}
                    </small>
                    {% endif %}
                </div>
                
                {% if show_stats %}
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div class="text-center p-2 bg-light rounded">
                            <h6 class="mb-0">{{ agency.total_brands }}</h6>
                            <small class="text-muted">Brands</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center p-2 bg-light rounded">
                            <h6 class="mb-0">{{ agency.total_campaigns }}</h6>
                            <small class="text-muted">Campaigns</small>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <div class="d-flex align-items-center justify-content-between">
                    <div class="contact-info">
                        {% if agency.email %}
                        <a href="mailto:{{ agency.email }}" class="text-muted me-2" title="Email">
                            <i class="fe fe-mail"></i>
                        </a>
                        {% endif %}
                        
                        {% if agency.phone %}
                        <a href="tel:{{ agency.phone }}" class="text-muted me-2" title="Phone">
                            <i class="fe fe-phone"></i>
                        </a>
                        {% endif %}
                        
                        {% if agency.website %}
                        <a href="{{ agency.website }}" target="_blank" class="text-muted me-2" title="Website">
                            <i class="fe fe-globe"></i>
                        </a>
                        {% endif %}
                    </div>
                    
                    <div class="actions">
                        <div class="btn-group" role="group">
                            <a href="{% url 'advertisers:agency_detail' agency.id %}" class="btn btn-sm btn-outline-primary" title="View Details">
                                <i class="fe fe-eye"></i>
                            </a>
                            <a href="{% url 'advertisers:agency_edit' agency.id %}" class="btn btn-sm btn-outline-warning" title="Edit">
                                <i class="fe fe-edit"></i>
                            </a>
                            <a href="{% url 'advertisers:brand_create' %}?agency={{ agency.id }}" class="btn btn-sm btn-outline-success" title="Add Brand">
                                <i class="fe fe-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card-footer bg-transparent">
        <div class="d-flex align-items-center justify-content-between">
            <small class="text-muted">
                <i class="fe fe-calendar me-1"></i>
                Created {{ agency.created_at|date:"M d, Y" }}
            </small>
            <small class="text-muted">
                {{ agency|days_since_created }} days ago
            </small>
        </div>
    </div>
</div>

<style>
.agency-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.agency-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agency-card .card-title a:hover {
    color: var(--bs-primary) !important;
}

.agency-card .contact-info a {
    transition: color 0.2s ease-in-out;
}

.agency-card .contact-info a:hover {
    color: var(--bs-primary) !important;
}
</style>