{% extends "layouts/dashboard.twig" %}

{% block title %}{{ __("affiliates.banners") }}{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ __("affiliates.available_banners") }}</h3>
        </div>
        <div class="card-body">
            {% if banners is not empty %}
                <div class="row">
                    {% for banner in banners %}
                        <div class="col-md-4 mb-4">
                            <div class="card h-100">
                                <img src="{{ banner.image_url }}" class="card-img-top" alt="{{ banner.name }}" style="max-width: 100%; height: auto;">
                                <div class="card-body">
                                    <h5 class="card-title">{{ banner.name }}</h5>
                                    <p class="card-text">{{ banner.description }}</p>
                                    <p class="card-text"><strong>{{ __("affiliates.size") }}:</strong> {{ banner.width }}x{{ banner.height }}px</p>
                                    <a href="/affiliates/banners/{{ banner.id }}/code" class="btn btn-primary btn-sm">{{ __("affiliates.get_code") }}</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p>{{ __("affiliates.no_banners_available") }}</p>
            {% endif %}
        </div>
    </div>
{% endblock %}