{% extends "base.html" %}
{% block title %}Compañías — MarineInvoice Pro{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
  <div><h1 class="page-title">Compañías</h1><p class="page-subtitle">Gestiona tus empresas</p></div>
  <a href="/companies/new" class="btn btn-primary">+ Nueva Compañía</a>
</div>
{% if companies %}
  {% for c in companies %}
  <div class="list-item">
    <div class="flex items-center gap-3">
      {% if c.logo_path %}
        <img src="/static/{{ c.logo_path }}" style="width:50px;height:50px;object-fit:contain;border-radius:8px;background:white;padding:4px;">
      {% else %}
        <div style="width:50px;height:50px;background:var(--navy-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;">🏢</div>
      {% endif %}
      <div class="list-item-info">
        <h4>{{ c.name }}</h4>
        <p>EIN: {{ c.ein }} · Tax: {{ c.tax_rate }}% · {{ c.city or '' }} {{ c.state or '' }}</p>
        {% if c.manager %}<p style="font-size:11px;margin-top:2px;">Gerente: {{ c.manager }}</p>{% endif %}
      </div>
    </div>
    <div class="list-item-actions">
      <a href="/companies/{{ c.id }}/edit" class="btn btn-secondary btn-sm">✏️ Editar</a>
      <button class="btn btn-danger btn-sm" onclick="delCompany({{ c.id }})">🗑️</button>
    </div>
  </div>
  {% endfor %}
{% else %}
  <div class="empty-state"><div class="emoji">🏢</div><h3>No hay compañías</h3><p>Crea tu primera compañía</p></div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
async function delCompany(id) {
  if (!confirm('¿Eliminar esta compañía?')) return;
  const r = await fetch(`/companies/${id}/delete`, {method:'POST'});
  const res = await r.json();
  if (res.success) { showToast('🗑️ Compañía eliminada'); setTimeout(()=>location.reload(), 1000); }
}
</script>
{% endblock %}