{% extends "base.html" %}
{% block title %}Brands{% endblock %}
{% block content %}
<div class="page-head">
  <div><h1>Brands</h1><p class="muted">Each company in your group can have its own look. Every person sends in their company's brand.</p></div>
  <a class="btn primary" href="{{ url_for('brand_edit') }}">{{ icon("plus") }} Add a Company Brand</a>
</div>
<div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))">
{% for key, b in brands.items() %}
  <a class="card brand-card" href="{{ url_for('brand_edit', key=key) }}">
    <div class="brand-band" style="background:{{ b.primary_color or '#1F4E79' }};border-bottom:4px solid {{ b.accent_color or '#F2A900' }}">
      {% if b.logo_file %}<img src="{{ url_for('brand_logo', filename=b.logo_file) }}" alt="">{% elif b.logo_url %}<img src="{{ b.logo_url }}" alt="">{% else %}<span>{{ b.name }}</span>{% endif %}
    </div>
    <h3 style="margin:12px 0 2px">{{ b.name }} {% if key == 'main' %}<span class="pill">Main company</span>{% endif %}</h3>
    <span class="muted small">{{ b.font or 'Arial' }} · {{ users.get(key, [])|length }} {{ 'person' if users.get(key, [])|length == 1 else 'people' }}{% if users.get(key) %}: {{ users[key]|join(', ') }}{% endif %}</span>
  </a>
{% endfor %}
</div>
{% endblock %}