{% extends 'base.html' %}
{% block title %}Compañías{% endblock %}
{% block page_title %}Compañías{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('company_new') }}" class="btn btn-primary">+ Nueva Compañía</a>
{% endblock %}
{% block content %}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px">
{% for c in companies %}
<div class="card" style="position:relative">
    <div style="display:flex;align-items:center;gap:14px;margin-bottom:14px">
        {% if c.logo_path %}
        <img src="/static/uploads/logos/{{ c.logo_path }}"
             style="width:56px;height:56px;object-fit:contain;border-radius:8px;
                    background:white;padding:4px;border:1px solid rgba(0,180,216,0.2)">
        {% else %}
        <div style="width:56px;height:56px;border-radius:8px;background:rgba(0,180,216,0.1);
                    display:flex;align-items:center;justify-content:center;font-size:24px">🏢</div>
        {% endif %}
        <div>
            <div style="font-size:16px;font-weight:700;color:var(--white)">{{ c.name }}</div>
            <div style="font-size:12px;color:var(--cyan)">{{ c.vessel_count }} embarcación{{ 'es' if c.vessel_count != 1 else '' }}</div>
        </div>
    </div>
    <div style="font-size:12px;color:var(--gray);display:flex;flex-direction:column;gap:4px">
        {% if c.phone %}<span>📞 {{ c.phone }}</span>{% endif %}
        {% if c.email %}<span>✉️ {{ c.email }}</span>{% endif %}
        {% if c.address %}<span>📍 {{ c.address }}</span>{% endif %}
        {% if c.website %}<span>🌐 {{ c.website }}</span>{% endif %}
    </div>
    <div class="flex gap-2 mt-4">
        <a href="{{ url_for('vessels') }}?company={{ c.id }}" class="btn btn-sm btn-secondary">Ver embarcaciones</a>
        <a href="{{ url_for('company_edit', coid=c.id) }}" class="btn btn-sm btn-secondary">✏️ Editar</a>
    </div>
</div>
{% else %}
<div style="grid-column:1/-1;text-align:center;padding:50px;color:var(--gray)">
    <div style="font-size:40px;margin-bottom:12px">🏢</div>
    <div>No hay compañías registradas.</div>
</div>
{% endfor %}
</div>
{% endblock %}