{% extends "public/base.html" %}
{% load static %}

{% block title %}Brands — {{ site.site_name }}{% endblock %}
{% block meta_description %}The brands of {{ site.site_name }}.{% endblock %}

{% block content %}
<div class="section-first-inner">

    <div class="section compact-bottom">
        <div class="hero-container">
            <div class="banner-inner">
                <div class="banner-inner-content">
                    <h1>Brands</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="hero-container">
            <div class="row">
                {% for brand in brands %}
                <div class="col-lg-4 col-md-6" style="margin-bottom:2rem">
                    <a href="{{ brand.get_absolute_url }}" style="display:block;text-decoration:none;color:inherit">
                        {% if brand.hero %}
                        <img src="{{ brand.hero.url }}" alt="{{ brand.name }}"
                             style="width:100%;height:220px;object-fit:cover;border-radius:10px;margin-bottom:1rem">
                        {% endif %}
                        {% if brand.logo %}
                        <img src="{{ brand.logo.url }}" alt="{{ brand.name }}"
                             style="height:36px;width:auto;margin-bottom:.75rem">
                        {% else %}
                        <h3 style="margin-bottom:.5rem">{{ brand.name }}</h3>
                        {% endif %}
                        {% if brand.tagline %}
                        <p style="font-weight:600;margin-bottom:.4rem;color:{% firstof brand.accent_colour tenant.accent_colour '#033152' %}">{{ brand.tagline }}</p>
                        {% endif %}
                        {% if brand.intro %}
                        <p style="opacity:.85">{{ brand.intro }}</p>
                        {% endif %}
                    </a>
                </div>
                {% empty %}
                <div class="col-12">
                    <p>No brands have been added yet.</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

</div>
{% endblock %}